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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

HTML示例：

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

CSS示例：

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

请注意：

  • 我想仅通过使用CSS来解决此问题。即我不想在颜色叠加的div“ testclass”内添加子div。

  • 这不应该是“悬停效果”，我只想向背景图像添加色彩过渡。

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

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

这可能吗？（如果没有，我会感到惊讶，但我对此一无所获），如果是的话，实现这一目标的最佳方法是什么？

所有的建议和意见表示赞赏！

回答：

我看到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，上面没有几个例子

第三种选择

  • 使用background-blen-mode：

该background-blend-modeCSS属性如何设定一个元素的背景图片应相互以及与元素的背景颜色相混合。

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

以上是 如何在背景图片上添加颜色叠加？ 的全部内容， 来源链接： utcz.com/qa/413130.html

回到顶部