如何在背景图像上添加颜色叠加? [英] How to add a color overlay to a background image?

问题描述

无论在SO还是Web上，我都经常看到这个问题.但是这些都不是我要找的东西.

I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.

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

How do I add a color-overlay to a background image using CSS only?

HTML示例:

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

示例CSS:

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

请注意:

• 我想仅通过使用CSS来解决此问题.也就是说，我不想在颜色叠加层的div测试类"中添加子div.

• I want to solve this by only using CSS. i.e I do NOT want to add a child div within the div "testclass" for the color overlay.

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

This should not be a "hover effect" I want to simply just add a color-overay to the background image.

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

I want to be able to use opacity i.e. I am looking for a solution that allows RGBA color.

我正在寻找一种颜色，可以说是黑色.不是渐变.

I am looking for just one color, lets say black. Not a gradient.

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

Is this possible? (I would be surprised if not, but I have not been able to find anything about this), and if so what the best way to accomplish this?

所有建议都值得赞赏！

推荐答案

我看到2个简单的选择:

I see 2 easy options:

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

渐变选项:

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 ，其中有几个示例

an old codepen of mine with few examples

第三种选择

• 带有background-blen-mode :

background-blend-mode CSS属性设置元素的背景图像如何彼此融合以及如何与元素的背景色融合.

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

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

这篇关于如何在背景图像上添加颜色叠加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！