CSS:半透明背景和图像

问题描述 投票:5回答:3
body {
  background-image: url('cloud.png');
  background-color: rgba(255, 255, 255, 0.6);
}

我试图使用上述以产生半透明的白色背景的背景图像的上方。这是行不通的,只有背景图像显示和背景颜色似乎被忽略。如何调整身体背景图像的透明度?

css background opacity
3个回答
2
投票

background-color放置background-image下方,而不是在它上面(在web浏览器中呈现时)。为了把一个半透明的白色块在图像上,您将需要放置另一个不同的HTML元素与background-color它的上面。


15
投票

您可以使用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);
}

jsfiddle


0
投票

我宣布一个专门出售时使用此两个单独的图像完成。一个是在背景中的永久图像,而另一个是用半透明背景浮在另一图像,即可以售后过容易地除去的临时销售图像。主要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

© www.soinside.com 2019 - 2024. All rights reserved.