CSS 如何为背景图像添加颜色叠加？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36679649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a color overlay to a background image?
提问by Alex
I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for.
我在 SO 和 Web 上都经常看到这个问题。但没有一个是我正在寻找的。
How do I add a color-overlay to a background image using CSS only?
如何仅使用 CSS 向背景图像添加颜色叠加？
Example HTML:
示例 HTML：
<div class="testclass">
</div>
Example CSS:
示例 CSS：
.testclass {
background-image: url("../img/img.jpg");
}
Please note:
请注意：
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.
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.
我想只使用 CSS 来解决这个问题。即我不想在颜色叠加的 div“testclass”中添加一个子 div。
这不应该是“悬停效果”，我只想向背景图像添加颜色叠加。
我希望能够使用不透明度，即我正在寻找一种允许 RGBA 颜色的解决方案。
我只找一种颜色，比如说黑色。不是渐变。
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?
这可能吗？（如果没有，我会感到惊讶，但我找不到任何关于此的信息），如果是这样，实现这一目标的最佳方法是什么？
All suggestions and advice are appreciated!
感谢所有建议和建议！
回答by G-Cyrillus
I see 2 easy options:
我看到 2 个简单的选项：
- multiple background with a translucent single gradient over image
- huge inset shadow
- 多个背景在图像上具有半透明的单个渐变
- 巨大的插入阴影
gradient option:
渐变选项：
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;
}
shadow option:
阴影选项：
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);
}
an old codepenof mine with few examples
我的一个旧代码笔，例子很少
a third option
第三种选择
- with background-blen-mode:
The
background-blend-modeCSS property sets how an element's background images should blend with each other and with the element's background color.
- 使用背景混合模式：
该
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;
}
回答by Stickers
You can use a pseudo element to create the overlay.
您可以使用伪元素来创建叠加层。
.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);
}
回答by Uzi
background-imagetakes multiple values.
background-image取多个值。
so a combination of just 1 color linear-gradient and css blend modeswill do the trick.
所以只有一种颜色线性渐变的组合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;
}
note that there is no support on IE/Edge for CSS blend-modes at all.
请注意，IE/Edge 根本不支持 CSS 混合模式。
回答by Udara
Try this, it's simple and clear. I have found it from here : https://css-tricks.com/tinted-images-multiple-backgrounds/
试试这个，简单明了。我从这里找到它：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);
}
