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下方，而不是位于其上方（在网络浏览器中呈现时）。要在图像上放置半透明的白色块，您需要使用background-color在其上放置另一个不同的HTML元素。

Answer 3

我在宣布特价促销时使用两张单独的图片完成了此操作。一个是背景中的永久性图像，另一个是临时销售图像，半透明背景浮动在另一个图像上，可以在销售结束后轻松删除。保持背景图像的主div需要是Position：relative，这样您就可以将半透明图像的位置：绝对放在另一个图像上。

这是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。