CSS：半透明背景和图像答案

【问题标题】：CSS: Semi-transparent background and an imageCSS：半透明背景和图像
【发布时间】：2013-11-15 17:43:35
【问题描述】：

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

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

【问题讨论】：

我相信background-image 总是优先。要么使图像半透明，要么在其上放置另一层半透明颜色。

标签： css background opacity

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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%; 
}

有关详细信息，请参阅完整说明 here。

【讨论】：