body {
background-image: url('cloud.png');
background-color: rgba(255, 255, 255, 0.6);
}
我试图使用上述以产生半透明的白色背景的背景图像的上方。这是行不通的,只有背景图像显示和背景颜色似乎被忽略。如何调整身体背景图像的透明度?
background-color
放置background-image
下方,而不是在它上面(在web浏览器中呈现时)。为了把一个半透明的白色块在图像上,您将需要放置另一个不同的HTML元素与background-color
它的上面。
您可以使用CSS“之前的”伪课前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);
}
我宣布一个专门出售时使用此两个单独的图像完成。一个是在背景中的永久图像,而另一个是用半透明背景浮在另一图像,即可以售后过容易地除去的临时销售图像。主要DIV持有的背景图片必须是位置:相对的,所以你可以定位与位置半透明图像:绝对比其他图像。
下面是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%;
}
欲了解更多信息,请参阅完整说明here。