我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更好看一点，我想放一个浅色透明的颜色“层”在上面。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像之上？
下面是我的CSS:
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
这是:
.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类中没有其他元素，则需要为该类定义宽度和高度
我知道这是一个很老的线程，但它显示在谷歌的顶部，所以这里有另一个选择。
这是纯CSS，不需要任何额外的HTML。
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
box-shadow特性有很多令人惊讶的用途。
来自CSS-技巧。。。有一个一步的方法可以做到这一点，而不需要Z索引和添加伪元素--需要线性梯度，我认为这意味着您需要CSS3的支持
.tinted-image {
background-image:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* your image */
url(image.jpg);
}
