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

如果您希望覆盖图像覆盖图层（使用rgba()），您可以创建一个伪元素并将其定位为{{ 1}}使用absolute，left，top和right属性来展开叠加层，如下所示：

bottom

<强> WORKING DEMO

它有任何内容吗？

如果是这样，您可以使用.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); }属性将叠加层移动到由具有较高z-index值的相对定位<p>元素包裹的内容下方，如下所示：

z-index

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

<强> UPDATED DEMO

Answer 2

使用透明PNG作为背景图像，然后您可以同时看到颜色和图像。

section {
    width:100%;
    height:400px;
    background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: rgba(0, 0, 0, 0.5);
}

Answer 3

您可以在同一声明中使用rgba

DEMO http://jsfiddle.net/b6vzN/1/

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

如果你希望像你的例子那样单独分配它，那么你需要指定背景图像，而不仅仅是背景

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

CSS - 背景图像和RGBA部分

3 个答案:

它有任何内容吗？