如何使用 CSS 为背景图像着色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12112746/
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 can I tint a background image with CSS?
提问by user1623053
I have a background image set up through CSS.
我有一个通过 CSS 设置的背景图像。
html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}
I plan on having a different background image for different pages of the website: so it's important that text is legible over it. Right now I've got a translucent black background to my #main content box in the middle like this in order to ensure legibility:
我计划为网站的不同页面使用不同的背景图片：所以重要的是文字在上面清晰易读。现在，为了确保易读性，我的#main 内容框中间有一个半透明的黑色背景，如下所示：
#main {
background: rgba(0, 0, 0, 0.5);
}
What I really want to do, though, is to have that kind of translucent background over the entire background image, because the black box looks a bit clunky. I've tried making a <div id=#tint>which includes the whole HTML document and giving rgba(0, 0, 0, 0.5) to #tint, but that doesn't work at all--I can either get nothing to change or I can get the entire background to become a simple grey with no background image visible at all. Is this simply not possible?
不过，我真正想做的是在整个背景图像上设置那种半透明的背景，因为黑框看起来有点笨重。我试过制作一个<div id=#tint>包含整个 HTML 文档的 rgba(0, 0, 0, 0.5) 给 #tint，但这根本不起作用——我要么什么都不能改变，要么我可以得到整个背景变成一个简单的灰色，根本看不到背景图像。这根本不可能吗？
采纳答案by Chris
I think you need to create an overlay element (potentially div) which has the sought translucent background. Something like:
我认为您需要创建一个div具有所寻求的半透明背景的叠加元素（可能）。就像是：
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}
And of course, a little demo: little link.
当然，还有一个小演示：小链接。
回答by hitautodestruct
Use background-blend-modefor a simple tint
用background-blend-mode一个简单的色调
You can use the background-blend-modecss property:
您可以使用background-blend-modecss 属性：
.background-tint {
background-color: rgba(200,100,0,.5); // Tint color
background-blend-mode: multiply;
}
Place it on any element with a background image and you're good to go.
将它放在任何带有背景图像的元素上，你就可以开始了。
The property is well supported in modern browsers NOTincluding IE 11. For non supporting browsers you can use a polyfill.
该属性在不包括 IE 11 的现代浏览器中得到很好的支持。对于不支持的浏览器，您可以使用polyfill。
Other Options
其他选项
Use filterfor a complex tint
使用filter一个复杂的色彩
You can use the filtercss property:
您可以使用filtercss 属性：
.background-tint {
filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}
Place it on any element with a background image and you're good to go.
In order to change the color change the hue-rotatevalue.
将它放在任何带有背景图像的元素上，你就可以开始了。为了改变颜色改变hue-rotate值。
The property is well supported in modern browsers NOTincluding IE 11.
该属性在现代浏览器中得到很好的支持，不包括 IE 11。
Use a flat linear-gradient and a multiple background overlay
使用平面线性渐变和多重背景叠加
.background-tint {
background-image:
linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
url('http://placehold.it/420')
}
I think this is the most widely used technique but it has the downside of being hardcoded i.e. you can't just take a class, stick it on an element and make a tint.
我认为这是最广泛使用的技术，但它有硬编码的缺点，即你不能只是上课，把它贴在一个元素上并进行着色。
You could make this into a less or sass mixin, something like:
你可以把它变成一个 less 或 sass mixin，比如：
less
less
.background-tint(@tint-color, @image-url) {
background-image:
linear-gradient( @tint-color, @tint-color ),
url( @image-url )
}
sass
sass
@mixin background-tint($tint_color, $image_url) {
background-image:
linear-gradient( $tint_color, $tint_color ),
url( $image_url )
}
Use a transparent background
使用透明背景
.background-tint { position: relative; }
.background-tint::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
This method has the advantage of working on most browsers and is just a nice class you add to any element.
The downside is that if you have anything else inside of that element you will have to wrap it in a div with some kind of positioning position: relativewould work best.
这种方法的优点是可以在大多数浏览器上使用，并且只是您添加到任何元素的一个很好的类。不利的一面是，如果该元素内还有其他任何内容，则必须将其包装在具有某种定位的 div 中，position: relative效果最佳。
Example:
例子：
<div class="background-tint">
<div class="u-relative">Some text here</div>
</div>
.u-relative { position: relative; }
回答by Chris Moschini
This worked great for me:
这对我很有用：
https://css-tricks.com/tinted-images-multiple-backgrounds/
https://css-tricks.com/tinted-images-multiple-backgrounds/
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
And building on another answer, you can do this with existing colors in less like:
并以另一个答案为基础，您可以使用现有颜色执行此操作，而不是：
linear-gradient(
fade(@brand-primary, 50%),
fade(@brand-primary, 50%)
),
回答by yunzen
It would be the overlayproperty
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlayBut it's a draft. Don't rely on it
这将是overlay财产
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay但它是一个草案。不要依赖它
回答by tahdhaze09
Try opacity:
尝试不透明度：
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
