CSS: 半透明背景和图片

Question

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

我尝试使用上述方法在背景图像上方产生半透明的白色背景，但它并没有生效，只有背景图像显示出来，背景颜色似乎被忽略了。如何调整body背景图片的不透明度？

- Juicy

---

我相信 background-image 总是优先考虑。你可以将图像设置为半透明，或者在其上方放置另一层半透明颜色。 - JofryHS

Answer 1

您可以使用CSS的“before”伪类来创建白色覆盖层，并将其放置在DOM中所有内容之前。添加z-index：-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

- Sammy

Answer 2

background-color 被放置在 background-image 下方，而不是在顶部（在 web 浏览器中呈现时）。如果要在图像上放置半透明的白色块，则需要在其上面放置另一个不同的 HTML 元素，并设置 background-color。

- Kevin Borders

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

更多信息，请查看完整的指令这里。

- user9159