应用于背景图像的背景颜色色调效果

Question

我尝试在背景图像上应用透明的颜色叠加，背景图像已显示出来，并且希望该代码是正确的，但如果有更有效的方法，请分享。

当我尝试使用rgba值和透明度应用背景颜色时，没有显示任何内容...

有什么建议吗？

.call-to-action {
color: #fff;
background: url(images/cta-bg.jpg) no-repeat center center fixed;
background-color: rgba(255, 255, 255, 0.5) !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-size: 18px;
padding: 48px 12px;
text-align: center;
}

http://i.stack.imgur.com/8iNun.png

- Tom25

---

颜色应用于图像之前。您需要两个容器，以便将图像置于颜色背后。 - Scott

使用多个背景图片，其中第二张图片为渐变。 - Paulie_D

Answer 1

使用不变的渐变作为第二个背景图像

JSfiddle演示

CSS

div {
    width 200px;
    height:200px;
    margin: 25px;
    border:1px solid grey;
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.5) 100%), url(http://lorempixel.com/output/city-q-c-200-200-1.jpg);
}

- Paulie_D

---

谢谢，Paulie！我已经将图像单独作为“background”，然后使用渐变设置了“background-image”。 - Tom25

Answer 2

你还需要将它混合：

background-blend-mode: multiply;

- yash_DedSec