1
CSS: set background image with opacity?への回答は、擬似要素:afterを使用した素晴らしい背景不透明度修正について説明しています。しかし、親の部分に背景色がある場合は、z-index: -1を使用するため、透明な背景画像は表示されなくなります。私は無駄にこの基本的なモデルを使用して多くの回避策を試してきました。背景画像の不透明度と親の背景色
サンプルコードです。 .locations_30 {background:white}を使わないとうまくいきません。あなたはこのようなあなたの.locations_20ルールを更新した場合
body {
background-color: #fefbed;
color: #444;
font-family: Helvetica, sans-serif;
font-size: 16px;
}
.locations_20 {
position: relative;
}
.locations_20:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: -1;
background-image: url(../background_images/zenrockgarden_mod.jpg);
background-repeat: no-repeat;
left: 0%;
top: 0%;
background-size: 100% 100%;
opacity: 0.27;
}
.locations_30 {
background: white;
width: 800px;
padding: 75px;
} /*parent division with color will overrun z-index: -1*/<body>
<div class="locations_40">
<div class="locations_30">
<p class="locations_20">
Super Sale Event We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following: etc,,, <br> We are happy to offer the following:
etc,,, <br> We are happy to offer the following: etc,,, <br>
</p>
</div>
</div>
</body>