CSS：半透明背景和图像

我尝试使用上面的方法在背景图像上方生成半透明的白色背景。它不工作，只显示背景图像，背景颜色似乎被忽略。如何调整身体背景图像的不透明度？

背景色

位于背景图像的下方，而不是上方（在web浏览器中渲染时）。要在图像上放置半透明的白色块，您需要在其顶部放置另一个不同的HTML元素，并使用

背景色
您可以使用css“before”伪类创建白色覆盖，并将其放置在DOM中的所有内容之前。添加z-index:-1以确保它不会位于其他元素之上：

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

我在宣布特价时使用了两张单独的图片。一个是背景中的永久图像，另一个是临时销售图像，半透明背景漂浮在另一个图像上，可以在销售结束后轻松移除。保存背景图像的主div需要是Position:relative，这样您就可以将Position:absolute的半透明图像放置在另一个图像上

以下是HTML：

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 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>

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