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>

CSS 背景颜色透明度和图像

1 个答案: