如何添加一个背景图像的颜色覆盖？

这个问题我在 SO 和 Web 上都看到过很多次。但他们都不是我要找的人。

我如何添加一个颜色覆盖的背景图像只使用 CSS？

示例 HTML:

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

示例 CSS:

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

请注意:

  • 我想只用 CSS 来解决这个问题。例如，我不想在 div“ testclass”中为颜色覆盖添加一个子 div。

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

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

  • 我正在寻找只有一种颜色，让我们说黑色。没有梯度。

这可能吗？(如果没有，我会感到惊讶，但我还没有找到任何关于这方面的东西) ，如果是这样，什么是最好的方式来实现这一点？

所有的建议和意见都是值得赞赏的！

475144 次浏览
小开

background-image采用多个值。

所以只需要一个颜色线性渐变和 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 混合模式。

小开

您可以使用伪元素来创建覆盖。

.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);
}
小开
最佳答案

我认为有两个简单的选择:

  • 多重背景与半透明的单梯度图像
  • 巨大的嵌入阴影

渐变选项:

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

小开

试试这个，它简单明了。我已经从这里找到了它: 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);
}

提交答案