css - 在背景图片上方添​​加透明色层

Question

我需要在背景图片上添加一个透明的彩色图层。我尝试用 rgba 这样做但没有结果。

我现在得到的是:

page-heading {
    background: rgba(36, 70, 105, 0.74) url("../images/samples/bg3.jpg") no-repeat fixed 50% 0px / cover;
    opacity: 0.9;
    position: relative;
    text-align: center;
    padding: 72px 0px;
}

我知道背景颜色是无法加载图像时的后备。如何以正确的方式在其上添加一层？

Answer 1

使用简单的 box-shadow 插图:

.page-heading {
    background: url(../images/samples/bg3.jpg) no-repeat fixed 50% 0px / cover;
    box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
}

JS fiddle :http://jsfiddle.net/ghorg12110/q0cLf2s7/