CSS背景颜色透明度和图像

Question

我正在编辑一个Drupal网站，但是我没有访问html文件的权限，我只能修改CSS。

我需要在图像背景上添加一些滤镜，因为没有滤镜，上面的文本就无法读取。

我尝试了以下css行:

.class{background: url(image.jpg) rgba(242, 244, 255, 0.73);}

.class{background: rgba(242, 244, 255, 0.73) url(image.jpg);}

.class{background-image: url(image.jpg); background-color: rgba(242, 244, 255, 0.73)}

但是这些都不起作用。我该怎么做呢?

Answer 1

背景图像总是绘制在背景色之上，所以这就是为什么你到目前为止尝试的组合不起作用。

此外，尽管您可以在现代浏览器中指定多个背景图像以相互分层，但您不能指定多种颜色。

一个有趣的小技巧是使用单色渐变作为额外的"图像"。对于颜色叠加:

.content {
width: 100%;
height: 100%;
height: 100vh;
}
.content {
/* note: images are specified front-to-back */
background-image: 
linear-gradient(0deg, rgba(242, 244, 255, 0.73), rgba(242, 244, 255, 0.73)),
url(https://www.gravatar.com/avatar/755f6bc8dad0c329cc4dd6d8844ab907?s=128&d=identicon&r=PG&f=1);
}

<div class="content">Hello!</div>