-1

テキストと透明な背景を持つヘッダー div があります。ヘッダーは150px固定の位置です。ヘッダーの下に表示されるコンテンツ div があります。私がやりたいのは、コンテンツ div の各行が、ページの上部から 150px (ヘッダーの下部) に達するようにフェードアウトすることです。
ヘッダーの下に表示されないようにします。

これは可能ですか？

4

2 に答える 2

1

あなたとチャットした後、あなたが持っているバックグラウンドを考慮して、私はあなたが-webkit-mask-image. ページ上のすべての画像を垂直不透明マスクでマスクする例を次に示します。

img{
  -webkit-mask-image: 
     -webkit-gradient(linear, left top, left bottom, 
       from(rgba(0,0,0,1)), 
       to(rgba(0,0,0,0)));
}

Gradient PNG適切なを使用しCSSて、ページの上部に全幅で表示することができます。これにより、疑似フェードが発生します。

必要な上からの高さを得るために、CSS の一部をわずかに調整する必要がある場合があります。また、z-index が高すぎる場合もありますが、これでうまく開始できるはずです。

HTML (IMGは、150px作成する必要があるグラデーション PNG です);

<div id="topFade">
   <img src="images/fade.png"/>
</div>

CSS

#topFade
{
   width: 100%;
   top: 0;
   position: fixed;
   height: 150px;
   float: left;
   z-index: 9998;
   margin: 0;
   padding: 0;
}
#topFade IMG
{
   width: 100%;
   height: 150px;
   margin: 0;
}

私は過去にこれをアプリケーションで使用しており、うまく機能しています。私は下にありましたが、上にも同じです。

ここに画像の説明を入力

于 2013-01-06T18:29:08.877 に答える
1

これは技術的でない解決策ではどうですか -

背景を部分的に透明にする代わりに、部分的に透明なグラデーションを使用します。このようにして、画像の上部では背景が無地になり (その背後のコンテンツは見えなくなります)、下部ではグラデーションが非常に弱く透明になり、コンテンツが見えます。 .

ユーザーがスクロールすると、フェードアウトの効果が得られます。逆に、コンテンツがフェードインすることもあります。

于 2013-01-06T18:30:54.310 に答える