灰度背景 CSS 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16340159/
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
Greyscale Background Css Images
提问by bluantinoo
I've searched a lot on the web but I cannot find a cross browser solution to fade a css backgrund image to greyscale and back.
我在网上搜索了很多，但找不到跨浏览器解决方案来将 css backgrund 图像淡化为灰度并返回。
The only working solution is to apply CSS3 filter greyscale:
唯一可行的解决方案是应用 CSS3 过滤器灰度：
-webkit-filter: grayscale(100%);
but this works just with Chrome v.15+ and Safari v.6+ (as you can see here: http://css3.bradshawenterprises.com/filters/)
但这仅适用于 Chrome v.15+ 和 Safari v.6+（如您所见：http://css3.bradshawenterprises.com/filters/ ）
Many pages online speaks about this solution to grey out elements:
许多在线页面都谈到了这种使元素变灰的解决方案：
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
(as you can see here:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
（如您所见：http: //www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）
But actually it does not seem to work for css background images, as the webkit filter do.
但实际上它似乎不适用于 css 背景图像，就像 webkit 过滤器所做的那样。
Are there any solution (maybe with jquery?) to hack this lack of support for filter on less advanced browsers?
是否有任何解决方案（可能使用 jquery？）来解决在不太先进的浏览器上缺乏对过滤器的支持的问题？
回答by Element808
Here you go:
干得好：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<style type="text/css">
div {
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 600px;
height: 600px;
float: left;
color: white;
}
.grayscale {
background: url(yourimagehere.jpg);
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.nongrayscale {
background: url(yourimagehere.jpg);
}
</style>
</head>
<body>
<div class="nongrayscale">
this is a non-grayscale of the bg image
</div>
<div class="grayscale">
this is a grayscale of the bg image
</div>
</body>
</html>
Tested it in FireFox, Chrome and IE. I've also attached an image to show my results of my implementation of this.
在 FireFox、Chrome 和 IE 中对其进行了测试。我还附上了一张图片来显示我的实施结果。
EDIT:Also, if you want the image to just toggle back and forth with jQuery, here's the page source for that...I've included the web link to jQuery and and image that's online so you should just be able to copy/paste to test it out:
编辑：此外，如果您希望图像只是使用 jQuery 来回切换，这是该页面的源代码......我已经包含了 jQuery 的网络链接和在线图像，因此您应该能够复制/粘贴来测试一下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
div {
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 600px;
height: 600px;
float: left;
color: white;
}
.grayscale {
background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.nongrayscale {
background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#image").mouseover(function () {
$(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1);
});
$("#image").mouseout(function () {
$(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
});
});
</script>
</head>
<body>
<div id="image" class="nongrayscale">
rollover this image to toggle grayscale
</div>
</body>
</html>
EDIT 2 (For IE10-11 Users):The solution above will not work with the changes Microsoft has made to the browser as of late, so here's an updated solution that will allow you to grayscale (or desaturate) your images.
编辑 2（对于 IE10-11 用户）：上述解决方案不适用于 Microsoft 最近对浏览器所做的更改，因此这里有一个更新的解决方案，可让您对图像进行灰度化（或去饱和）。
<svg>
<defs>
<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
<feColorMatrix type="saturate" values="0" />
</filter>
</defs>
<image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg>回答by Sven Ya
Using current browsers you can use it like this:
使用当前的浏览器，您可以像这样使用它：
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
and to remedy it:
并对其进行补救：
img:hover{
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
}
worked with me and is much shorter. There is even more one can do within the CSS:
和我一起工作，时间要短得多。在 CSS 中还有更多的事情可以做：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
For more information and supporting browsers see this: http://www.w3schools.com/cssref/css3_pr_filter.asp
有关更多信息和支持浏览器，请参见：http: //www.w3schools.com/cssref/css3_pr_filter.asp
回答by arieljuod
I know it's a really old question, but it's the first result on duckduckgo, so I wanted to share what I think it's a better and more modern solution.
我知道这是一个非常古老的问题，但它是duckduckgo 上的第一个结果，所以我想分享我认为它是一个更好、更现代的解决方案。
You can use background-blend-modeproperty to achieve a greyscale image:
您可以使用background-blend-mode属性来实现灰度图像：
#something {
background-color: #fff;
background-image: url("yourimage");
background-blend-mode: luminosity;
}
If you want to remove the effect, just change the blend-mode to initial.
如果要删除效果，只需将混合模式更改为initial.
You may need to play a little bit with the background-color if this element is over something with a background. What I've found is that the greyscale does not depend on the actual color but on the alpha value. So, if you have a blue background on the parent, set the same background on #something.
如果这个元素在有背景的东西上，你可能需要稍微使用背景色。我发现灰度不取决于实际颜色，而是取决于 alpha 值。因此，如果您在父项上有蓝色背景，请在 上设置相同的背景#something。
You can also use two images, one with color and the other without and set both as background and play with other blend modes.
您还可以使用两个图像，一个有颜色，另一个没有，并将两者都设置为背景并使用其他混合模式进行播放。
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
It won't work on Edge though.
但它在 Edge 上不起作用。
EDIT: I've miss the "fade" part of the question.
编辑：我错过了问题的“淡入淡出”部分。
If you wan't to make it fade from/to grayscale, you can use a css transition on the background color changeing it's alpha value:
如果你不想让它从灰度淡出/淡化到灰度，你可以在背景颜色上使用 css 过渡来改变它的 alpha 值：
#something {
background-color: rgba(255,255,255,1);
background-image: url("yourimage");
background-blend-mode: luminosity;
transition: background-color 1s ease-out;
}
#something:hover {
background-color: rgba(255,255,255,0);
}
I'm also adding a codepen example for completeness https://codepen.io/anon/pen/OBKKVZ
我还添加了一个 codepen 示例以确保完整性https://codepen.io/anon/pen/OBKKVZ
回答by Greenfield
You can also use:
您还可以使用：
img{
filter:grayscale(100%);
}
img:hover{
filter:none;
}
回答by Aria
You don't need to use complicated coding really!
你真的不需要使用复杂的编码！
Greyscale Hover:
灰度悬停：
-webkit-filter: grayscale(100%);
-webkit-filter：灰度（100%）；
Greyscale "Hover-out":
灰度“悬停”：
-webkit-filter: grayscale(0%);
-webkit-filter: 灰度(0%);
I simply made my css class have a separate hover class and added in the second greyscale. It's really simple if you really don't like complexity.
我只是让我的 css 类有一个单独的悬停类并添加到第二个灰度中。如果你真的不喜欢复杂，那真的很简单。
