ヘッダーと内容での不透明効果

-1

このWebサイトで見られる効果を作成する方法を説明してください。コンテンツの不透明度が、ビューポートの上部に近づくにつれて濁った白に変わります。私はコードを見てきましたが、自分の望む効果を得ることはできません。 http://www.sylvainreucherand.fr/ヘッダーと内容での不透明効果

出典

2017-03-05 Chase Klingel

線形グラデーションにDIVの背景を設定し、不透明度を変更します。 – 4castle

次のようにエフェクトを作成できます。何か問題がある場合は教えてください。

HTML：

<body> 
    <div class="haze-effect"> 
</body>

CSS：

body { 
    position: relative; 
} 

.haze-effect { 
    left: 0; 
    top: 0; 
    position: fixed; 
    height: 300px; 
    width: 100% 

    background: -webkit-linear-gradient(#fff,hsla(0,0%,100%,0)); 
    background: linear-gradient(#fff,hsla(0,0%,100%,0)); 
}

出典

2017-03-05 03:31:19 Aaron

あなたのウェブページにZ-インデックスが適用されている要素がある場合、より高い値のZ-インデックスをdivに与えることができます。 – Aaron

アーロン、完璧に働いた！どうもありがとうございます。 –

ご希望の場合は、私に答えてもらえます:) – Aaron

ヘッダーと内容での不透明効果

答えて

関連する問題