CSSフルスクリーン背景rgbaオーバーレイ

Question

私は、ボディではなくHTMLのCSSに適用した固定フルスクリーンの背景イメージを持っています。私は私があまりにもコンマなしで試してみました

background:rgba(0, 0, 0, 0.6), url(image.jpg); 

をしようとしたとき、それは動作しませんでしたが、それは助けにはならなかったので、体のCSSにある下げ不透明と黒のオーバーレイを持っています。私はheight: 100%をbodyに色オーバーレイで設定しました。それはスクリーンの高さの100％を使用しているため、スクロールダウンするまで機能します。

私が取り組んでいるページは、1つまたは2つのポートレート/高さの画像しかないギャラリーで、画面を横切って伸びてオーバーレイが追いつかないときに問題を引き起こします。

簡単な修正がない場合、条件付きのJavaScriptコードなどを追加して、カップルの画像が表示されているときに身長を伸ばすことはできますか？

Answer 1

ページの上部にあるdivを作成してオーバーレイを作成することをお勧めします。下のスニペットの私の例を見てください。

基本的にoverlay divはfixedですので、スクロールしてもtop: 0にとどまります。高さと幅が100％であるため、画面が常に満たされます。今度はあなたの背景をもう一度、またはいつでもあなたが望む場所に設定することができます。

.overlay { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.6); 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
.content { 
 
    height: 1000px; 
 
    background: green; 
 
}

<div class="overlay"></div> 
 
<div class="content">Text</div> 
 
<div class="content">Text</div>