CSS - 部分中的背景图像和 RGBA

Question

我只是想为图像添加背景颜色 (rgba)，但不起作用。

我的 CSS 是:

section{
width:100%;

height:400px;


background: url(../img/background2.jpg);
background-color: rgba(0,0,0,0.5);
}

我只是想放置不同的位置，比如背景图像，或者只是背景，但不起作用。

Answer 1

正如我在 comments 中指出的那样，背景颜色作为背景图像的后备，除非图像是透明的:

section {background: rgba(0,0,0,0.5) url(../img/background2.png) 0 0 no-repeat;}

如果你想用overlay层覆盖图像(使用rgba())，你可以创建一个伪元素并将其定位为absolute使用left , top , right和 bottom扩展叠加层的属性，如下所示:

.box {
    background: url(http://lorempixel.com/500/500) no-repeat center center;
    position: relative;
}

.box:after {
    content: ' ';
    position: absolute;
    left: 0;  right: 0; top: 0; bottom: 0; /* Fill the entire space */
    background-color: rgba(0,0,0,.4);
}

WORKING DEMO .

有内容吗？

如果是这样，您可以使用 z-index属性将叠加层移动到由相对定位 <p> 包裹的内容下方z-index 更高的元素值，如下:

<section class="box">
    <p>Content goes here...</p>
</section>

p {
    position: relative;
    z-index: 2;
}

.box:after {
    content: ' ';
    position: absolute;
    z-index: 1;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: rgba(0,0,0,.4);
}

UPDATED DEMO .