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

Question

我有一个DIV，我想把一个模式作为背景。这种模式是灰色的。所以为了让它更好一点，我想把一个透明的浅色“层”放在上面。以下是我尝试但不起作用的内容。有没有办法将彩色图层放在背景图像上？这是我的CSS：background: url('../img/bg/diagonalnoise.png');background-color: rgba(248, 247, 216, 0.7);

Answer 1

这里是：

.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，如果内部没有其他元素，则需要为类定义宽度和高度

Answer 2

我知道这是一个非常古老的主题，但它在谷歌的顶部显示，所以这是另一种选择。

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

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

盒子阴影功能的使用数量惊人。