如何在背景图像上添加颜色叠加层？

Question

我在SO和网络上经常看到这个问题，但都不是我想要的答案。

如何仅使用CSS将颜色叠加到背景图片上？

示例HTML：

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

示例 CSS：

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

请注意：

• 我想仅使用CSS来解决这个问题，即我不想在“testclass” div中添加子div来制作颜色叠加效果。

• 这不应该是一个“hover effect”（鼠标悬停效果），我只是想向背景图像添加颜色叠加。

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

• 我只需要一种颜色，比如黑色。不需要渐变。

这可行吗？（如果不能，我会很惊讶，但我找不到任何关于这个的东西），如果可以，达成这个目标的最佳方法是什么？

非常感谢所有建议和意见！

- Alex

---

背景图像上方还是背后覆盖一个颜色叠加层？ - Jacob G

这方面有成千上万的问题...我真的很惊讶你没有找到明显的重复问题。 - Paulie_D

是的，这个问题是重复的。 - Fiido93

如果您认为这是重复的，请给我一个链接。因为我找到的其他问题没有符合我的要求，例如不使用子div并仅使用CSS来解决它。可能我错过了，但... - Alex

Answer 1

我看到有两个简单的选择：

• 使用透明的单一渐变覆盖在图片上的多重背景
• 巨大的内嵌阴影

渐变选项：

    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);
}

这是我以前写的一个 codepen，包含几个示例。

---

第三种选择：

• 使用background-blend-mode ：

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

---

box-shadow: inset 0 0 0 50vw rgba(255,0,150,0.3);是一个很好的选择，它应该始终覆盖屏幕。 - igneosaur

我喜欢第三个选项！（推荐第三个） - AtLeastTheresToast

我建议设置min-height:100vh; - Rami Zebian

“box-shadow: inset 0 0 0 50vw rgba(255,0,150,0.3)” 是我目前见过最好且最容易理解的答案。 - Eric. M

这就是我需要的，我只需要更改：background-blend-mode: overlay;。 - Melroy van den Berg

Answer 2

background-image可以接受多个值。

因此，只需结合1种颜色的linear-gradient和CSS混合模式即可完成此操作。

.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混合模式。

- Uzi

---

最好提到浏览器支持表 - http://caniuse.com/#feat=css-backgroundblendmode - Stickers

你说得特别对，考虑到IE/Edge完全缺乏支持，而Safari稍微落后一些。感谢指出！ - Uzi

background-blend-mode: multiply; 对于我来说在颜色方面效果最好 - Stas Sorokin

Answer 3

你可以使用伪元素来创建遮罩层。

.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

Answer 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);
}

- Udara Herath