背景图像上的半透明颜色层？

Question

我有一个DIV，我想把一个模式作为背景。这种模式是灰色的。所以为了让它更好一点，我想把一个透明的浅色“层”放在上面。以下是我尝试但不起作用的内容。有没有办法将彩色图层放在背景图像上？

这是我的CSS：

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

background-color: rgba(248, 247, 216, 0.7);

Answer 1

这里是：.background {&nbsp; &nbsp; background:url('../img/bg/diagonalnoise.png');&nbsp; &nbsp; position: relative;}.layer {&nbsp; &nbsp; background-color: rgba(248, 247, 216, 0.7);&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;}这个HTML：<div class="background">&nbsp; &nbsp; <div class="layer">&nbsp; &nbsp; </div></div>当然.background，如果内部没有其他元素，则需要为类定义宽度和高度

Answer 2

我知道这是一个非常古老的主题，但它在谷歌的顶部显示，所以这是另一种选择。这个是纯CSS，不需要任何额外的HTML。box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);盒子阴影功能的使用数量惊人。