固定位置要素の下のスクロールテキスト

Question

現在、1ページのWebサイトを作成していますが、問題があります。固定要素の下にスクロールテキストが必要ですが、固定位置要素の下に消えてしまうはずのテキストが表示されます透明なpngである背景としての要素として、テキストが固定位置要素の下をスクロールするときにテキストを隠すことができる方法があります。ここで

は、テキストが赤のボーダーとボックスの後ろに移動したとき、それはを必要とせずに、visisbleにならないように理想的には、私はそれを望んでいます

JS FIDDLE

これまでのところ、私が持っているもののフィドルです背景色。

Answer 1

私はあなたのウェブサイトにアクセスして、あなたが達成しようとしていることをよりよく理解するためにいくつかのイメージを盗んだ。あなたがページの背景を混乱させるので、 ....

あなたはそれが働いPNGなしであなたの目標を思い描くには少し難しいあなたdemo

Answer 2

テキストを非表示にする何かが#bannerに必要です。 CSSからは、そのブロックに背景画像があるように見えますが、表示されません。

ヘッダーは、あなたのCSSリセットで設定されたとおりに透明です。したがって、テキストを非表示にするには、カラーまたはイメージが必要です。そうでなければ、それはガラスの後ろにテキストを移動するようなものです...あなたが実際にそれをカバーするものを持っていない限り、あなたはまだテキストを見るでしょう。

ヘッダーに作業中の背景画像があると、透明でないテキストがブロックされることがあります。背景色を追加すると、その効果が得られます。