如何为背景图像添加颜色叠加？ [复制]答案

【问题标题】：How to add a color overlay to a background image? [duplicate]如何为背景图像添加颜色叠加？ [复制]
【发布时间】：2016-08-09 08:16:58
【问题描述】：

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

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

示例 HTML：

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

示例 CSS：

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

请注意：

我想只使用 CSS 来解决这个问题。即我不想在 div“testclass”中为颜色叠加添加子 div。
这不应该是“悬停效果”，我只想在背景图像上添加一个颜色覆盖。
我希望能够使用不透明度，即我正在寻找一种允许 RGBA 颜色的解决方案。
我只寻找一种颜色，比如说黑色。不是渐变。

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

感谢所有建议和建议！

【问题讨论】：

背景图像顶部或后面的颜色叠加层？
关于这方面的问题有数千个......我真的很惊讶你没有找到明显的重复问题。
是的，这个问题是重复的。
如果您认为它是重复的，请给我一个链接。因为我发现的其他问题都没有相同的要求，所以我有示例不使用 child-div 并仅使用 CSS 来解决它。可能我错过了它...

标签： css background-image background-color

【解决方案1】：

background-image 接受多个值。

所以只需 1 种颜色线性渐变和 css blend modes 的组合就可以解决问题。

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

请注意，IE/Edge 根本不支持 CSS 混合模式。

【讨论】：

最好提一下浏览器支持表 - caniuse.com/#feat=css-backgroundblendmode
你说的特别对，考虑到 IE/Edge 完全缺乏支持，而 Safari 有点落后。谢谢指出！

【解决方案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);
}

【讨论】：

【解决方案3】：

我看到了 2 个简单的选项：

在图像上带有半透明单一渐变的多背景
巨大的嵌入阴影

渐变选项：

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

阴影选项：

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

我的一个老 codepen 有几个例子

第三个选项

with background-blen-mode：

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

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

【讨论】：

谢谢！将您的回答标记为正确，因为我认为您的回答最符合我的需求，并且还使代码比其他解决方案更简洁:)
box-shadow: inset 0 0 0 50vw rgba(255,0,150,0.3); 是一个不错的选择，应该始终覆盖屏幕。
这绝对是一种享受，谢谢先生
我喜欢第三个选项！（推荐三）
box-shadow: inset 0 0 0 50vw rgba(255,0,150,0.3) 是这个问题的最佳和最简单的答案，这是众所周知的

【解决方案4】：

试试这个，简单明了。我从这里找到它：https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {

  width: 300px;
  height: 200px;

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}

【讨论】：