css - CSS: 半透明の背景と画像

Question

body {
  background-image: url('cloud.png');
  background-color: rgba(255, 255, 255, 0.6);
}

上記を使用して、背景画像の上に半透明の白い背景を作成してみました。背景画像のみが表示され、背景色は無視されているように見えます。体の背景画像の不透明度を調整するにはどうすればよいですか?

Answer 1

css "before" 疑似クラスを使用して、白いオーバーレイを作成し、DOM 内のすべてのコンテンツの前に配置できます。z-index:-1 を追加して、他の要素の上に置かれないようにします。

body {
    background: url("image.jpg");
}
body:before {
    content: "";
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.6);
}

jsfiddle

Answer 2

background-colorは上ではなく下background-imageに配置されます (Web ブラウザーでレンダリングされた場合)。画像の上に半透明の白いブロックを配置するには、その上に別の別の HTML 要素を で配置する必要がありますbackground-color。

Answer 3

特別セールを発表する際に、2 つの別々の画像を使用してこれを行いました。1 つは背景の恒久的な画像で、もう 1 つは半透明の背景が他の画像の上に浮かんでいる一時的な販売画像で、販売終了後に簡単に削除できます。背景画像を保持するメイン div は、Position:relative である必要があるため、position:absolute を使用して半透明の画像を他の画像の上に配置できます。

HTMLは次のとおりです。

<div class="tempsale" >
    <img src="images/ULR FOR YOUR BANNER GOES HERE.jpg" width="800" height="100" border="0" alt="banner">
    <div class="tempsaletext">
        <img src="images/URL FOR YOUR TEMPORARY SALE GOES HERE.jpg" width="500px" height="80px" alt="Sale">
    </div>
</div>

CSSは次のとおりです。

.tempsale {
    text-align:center; 
    position:relative;
}
.tempsaletext {
    positon:absolute; 
    top:10px; 
    left:20%; 
}

詳細については、こちらの完全な手順を参照してください。