在 HTML/CSS 中将图像转换为灰度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/609273/
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
Convert an image to grayscale in HTML/CSS
提问by Ken
Is there a simple way to display a color bitmap in grayscale with just HTML/CSS?
有没有一种简单的方法来显示灰度彩色位图HTML/CSS？
It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.
它不需要与 IE 兼容（我想它不会）——如果它适用于 FF3 和/或 Sf3，那对我来说就足够了。
I know I can do it with both SVGand Canvas, but that seems like a lot of work right now.
我知道我可以同时使用SVGCanvas 和 Canvas，但现在这似乎需要做很多工作。
Is there a truly lazy person's way to do this?
有没有真正懒人的方法来做到这一点？
回答by Salman von Abbas
Support for CSS filters has landed in Webkit.So we now have a cross-browser solution.
Webkit 已经支持 CSS 过滤器。所以我们现在有了一个跨浏览器的解决方案。
img {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
/* Disable grayscale on hover */
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}<img src="http://lorempixel.com/400/200/">What about Internet Explorer 10?
Internet Explorer 10 怎么样？
You can use a polyfill like gray.
您可以使用类似gray的 polyfill 。
回答by robertc
Following on from brillout.com's answer, and also Roman Nurik's answer, and relaxing somewhat the the 'no SVG' requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.
继brillout.com 的回答以及Roman Nurik 的回答之后，稍微放宽“无 SVG”的要求，您可以仅使用单个 SVG 文件和一些 CSS 来降低 Firefox 中的图像饱和度。
Your SVG file will look like this:
您的 SVG 文件将如下所示：
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<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>
Save that as resources.svg, it can be reused from now on for any image you want to change to greyscale.
将其保存为 resources.svg，它可以从现在开始重复用于您想要更改为灰度的任何图像。
In your CSS you reference the filter using the Firefox specific filterproperty:
在您的 CSS 中，您使用 Firefox 特定filter属性引用过滤器：
.target {
filter: url(resources.svg#desaturate);
}
Add the MS proprietary ones too if you feel like it, apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8).
如果您愿意，也可以添加 MS 专有的，将该类应用于您想要转换为灰度的任何图像（适用于 Firefox > 3.5，IE8）。
edit: Here's a nice blog postwhich describes using the new CSS3 filterproperty in SalmanPK's answer in concert with the SVG approach described here. Using that approach you'd end up with something like:
编辑： 这是一篇不错的博客文章，它描述了filter在 SalmanPK 的答案中使用新的 CSS3属性与此处描述的 SVG 方法相一致。使用这种方法，你最终会得到类似的结果：
img.desaturate{
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: url(resources.svg#desaturate); /* older Firefox */
filter: grayscale(100%); /* Current draft standard */
}
回答by mquandalle
For Firefox you don't need to create a filter.svg file, you can use data URI scheme.
对于 Firefox，您不需要创建 filter.svg 文件，您可以使用data URI scheme。
Taking up the css code of the first answer gives:
拿起第一个答案的css代码给出：
filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */
Take care to replace "utf-8" string by your file encoding.
注意用您的文件编码替换“utf-8”字符串。
This method should be faster than the other because the browser will not need to do a second HTTP request.
这种方法应该比另一种更快，因为浏览器不需要进行第二次 HTTP 请求。
回答by Karl Horky
Update:I made this into a full GitHub repo, including JavaScript polyfill for IE10 and IE11: https://github.com/karlhorky/gray
更新：我把它变成了一个完整的 GitHub 存储库，包括 IE10 和 IE11 的 JavaScript polyfill：https: //github.com/karlhorky/gray
I originally used SalmanPK's answer, but then created the variation below to eliminate the extra HTTP request required for the SVG file. The inline SVG works in Firefox versions 10 and above, and versions lower than 10 no longer account for even 1% of the global browser market.
我最初使用SalmanPK's answer，但随后创建了下面的变体以消除 SVG 文件所需的额外 HTTP 请求。内联SVG适用于Firefox 10及以上版本，低于10的版本不再占全球浏览器市场的1%。
I have since been keeping the solution updated on this blog post, adding support for fading back to color, IE 10/11 support with SVG, and partial grayscale in the demo.
从那以后，我一直在此博客文章中更新解决方案，在演示中添加了对颜色淡出的支持、IE 10/11 对 SVG 的支持以及部分灰度。
img.grayscale {
/* Firefox 10+, Firefox on Android */
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");
/* IE 6-9 */
filter: gray;
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(100%);
}
img.grayscale.disabled {
filter: none;
-webkit-filter: grayscale(0%);
}
回答by chrismacp
If you are able to use JavaScript, then this script may be what you are looking for. It works cross browser and is working fine for me so far. You can't use it with images loaded from a different domain.
如果您能够使用 JavaScript，那么这个脚本可能就是您要找的。它可以跨浏览器工作，到目前为止对我来说工作正常。您不能将它用于从不同域加载的图像。
回答by RobertT
Just got the same problem today. I've initially used SalmanPK solutionbut found out that effect differs between FF and other browsers. That's because conversion matrix works on lightness only not luminosity like filters in Chrome/IE . To my surprise I've found out that alternative and simpler solution in SVG also works in FF4+ and produces better results:
今天刚遇到同样的问题。我最初使用SalmanPK 解决方案，但发现效果在 FF 和其他浏览器之间有所不同。那是因为转换矩阵仅适用于亮度，而不是像 Chrome/IE 中的过滤器那样的亮度。令我惊讶的是，我发现 SVG 中的替代和更简单的解决方案也适用于 FF4+ 并产生更好的结果：
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>
With css:
使用 CSS：
img {
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
One more caveat is that IE10 doesn't support "filter: gray:" in standards compliant mode anymore, so needs compatibility mode switch in headers to work:
另一个警告是 IE10 不再支持标准兼容模式中的“过滤器：灰色：”，因此需要在标头中切换兼容模式才能工作：
<meta http-equiv="X-UA-Compatible" content="IE=9" />
回答by NK Chaudhary
Simplest way to achieve grayscale with CSS exclusively is via the filterproperty.
仅使用 CSS 实现灰度的最简单方法是通过filter属性。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
The property is still not fully supported and still requires the -webkit-filterproperty for support across all browsers.
该属性仍未得到完全支持，并且仍需要该-webkit-filter属性以支持所有浏览器。
回答by Annie
For people who are asking about the ignored IE10+ support in other answers, checkout this piece of CSS:
对于在其他答案中询问被忽略的 IE10+ 支持的人，请查看这段 CSS：
img.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
svg {
background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
svg image:hover {
opacity: 0;
}
Applied on this markup:
应用于此标记：
<!DOCTYPE HTML>
<html>
<head>
<title>Grayscaling in Internet Explorer 10+</title>
</head>
<body>
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url("#filtersPicture")" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>
</body>
</html>
For more demos, checkout IE testdrive's CSS3 Graphics sectionand this old IE blog http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
有关更多演示，请查看 IE testdrive 的CSS3 图形部分和这个旧的 IE 博客http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
回答by brillout
In Internet Explorer use the filter property.
在 Internet Explorer 中使用过滤器属性。
In webkit and Firefox there is currently no way to desatuarte an image solely with CSS. so you will need to use either canvas or SVG for a client side solution.
在 webkit 和 Firefox 中，目前无法单独使用 CSS 对图像进行去饱和处理。因此，您需要将画布或 SVG 用于客户端解决方案。
But I think using SVG is more elegant. check out my blog post for the SVG solution that works for both Firefox and webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
但我认为使用 SVG 更优雅。查看我的博客文章，了解适用于 Firefox 和 webkit 的 SVG 解决方案：http: //webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
And strictly speaking since SVG is HTML the solution is pure html+css :-)
严格来说，由于 SVG 是 HTML，所以解决方案是纯 html+css :-)
回答by Roman Nurik
Doesn't look like it's possible (yet), even with CSS3 or proprietary -webkit-or -moz-CSS properties.
看起来不可能（还），即使使用 CSS3 或专有-webkit-或-moz-CSS 属性。
However, I did find this post from last Junethat used SVG filters on HTML. Not available in any current browser (the demo hinted at a custom WebKit build), but very impressive as a proof of concept.
但是，我确实发现去年六月的这篇文章在 HTML 上使用了 SVG 过滤器。在当前的任何浏览器中都不可用（该演示暗示了自定义 WebKit 构建），但作为概念证明非常令人印象深刻。
