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

Answer 3

在宣布特价促销时，我使用了两张单独的图片来完成此操作。一个是背景中的永久图像，另一个是半透明背景的临时销售图像，浮动在另一个图像上，销售结束后可以轻松删除。保存背景图像的主 div 必须是 Position:relative，这样您就可以使用 position:absolute 将半透明图像定位在另一个图像上。

这是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%; 
}

有关详细信息，请参阅此处的完整说明。