固定の背景にテキストの効果が消えています

Question

この「site」のテキスト「DESTINATIONS」のように消えていくテキストエフェクトを作成する方法は不思議です。

background-attachment: fixed; 
background-repeat: no-repeat; 

で固定背景効果を作成する方法はわかりましたが、どのプロパティをテキストに追加する必要があるのか​​わかりません。私はテキストがposition: absolute;を持っている必要がありますが、私たちがスクロールしてテキストが消えるとき、私はこのサイトのような効果を与えません。

Answer 1

テキストは明らかではない、他のHTML要素に関連して、ビューポート/ウィンドウに関連してその位置を固定するposition: fixedを持っています。

スクロール要素によって覆われるようにするには、最も簡単な方法は、z-index: -1;のような負のz-インデックス値を与えることです。この方法では、Z-インデックスを持たない他の要素で覆われます。

そのテキストの背後にあるイメージを持つ要素は、その下にとどまるためにはさらに大きな負のz-インデックスが必要です。そしてそれは明らかにposition: fixedも持っています。

（すべてこのコードを見ずに、わずかに異なるかもしれませんが、それはその仕事をこのように作るための最も一般的な方法です）