如何为背景图像添加颜色叠加？

Question

我在 SO 和 Web 上都看到了很多这个问题。但它们都不是我想要的。

如何仅使用 CSS 向背景图像添加颜色叠加？

示例 HTML：

 <div class="testclass">
</div>

示例 CSS：

 .testclass {
    background-image: url("../img/img.jpg");
}

请注意：

• 我想只使用 CSS 来解决这个问题。即我不想在 div“testclass”中为颜色叠加添加一个子 div。

• 这不应该是“悬停效果”，我只想在背景图像中添加一个颜色覆盖。

• 我希望能够使用不透明度，即我正在寻找一种允许 RGBA 颜色的解决方案。

• 我正在寻找一种颜色，比如说黑色。不是渐变。

这可能吗？ （如果没有，我会感到惊讶，但我无法找到任何关于此的信息），如果是这样，实现这一目标的最佳方法是什么？

感谢所有建议和建议！

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我看到 2 个简单的选项：

• 具有半透明单个渐变的多个背景
• 巨大的嵌入阴影

渐变选项：

     html {
      min-height:100%;
      background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(https://picsum.photos/id/1043/800/600);
      background-size:cover;
    }

阴影选项：

 html {
  min-height: 100%;
  background: url(https://picsum.photos/id/1043/800/600);
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

我的一个旧 代码笔，几乎没有例子

---

第三种选择

• 使用背景混合模式：

background-blend-mode CSS 属性设置元素的背景图像应该如何相互混合以及与元素的背景颜色混合。

 html {
  min-height: 100%;
  background: url(https://picsum.photos/id/1043/800/600) rgba(255, 0, 150, 0.3);
  background-size: cover;
  background-blend-mode: multiply;
}

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用伪元素来创建叠加层。

 .testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议