背景图像上的半透明彩色层?

我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?

这是我的CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

当前回答

你也可以添加不透明度叠加颜色。

而不是做

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

你可以:

background: url('../img/bg/diagonalnoise.png');

然后为不透明度颜色创建一个新样式:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

将不透明度更改为低于1的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。

2020-06-19 16:50:56

其他回答

下面就是:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML:

<div class="background">
    <div class="layer">
    </div>
</div>

当然，如果.background类中没有其他元素，则需要为它定义宽度和高度

2012-02-07 20:04:08

然后你需要一个bg图像的包装元素和bg颜色的内容元素:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

还有css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

2012-02-07 20:07:04

我知道这是一个非常旧的线程，但它显示在谷歌的顶部，所以这里有另一个选项。

它是纯CSS，不需要任何额外的HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

盒影特性的应用数量惊人。

2014-06-06 14:48:49

另一个带有SVG的内联覆盖图像(注意:如果你在SVG代码中使用#，你必须urlencode !):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

2019-11-10 11:43:14