在HTML/CSS中将图像转换为灰度
有没有一种仅用HTML/CSS就能以灰度显示彩色位图的简单方法
它不需要与IE兼容(我想也不需要) --如果它能在FF3和/或Sf3中工作，对我来说就足够了。
我知道我可以用SVG和Canvas来做这件事，但现在似乎有很多工作要做。
有没有一个真正懒惰的人可以做到这一点？
回答 25
Stack Overflow用户
发布于 2011-12-23 11:45:02
Support for CSS filters has landed in Webkit.所以我们现在有了一个跨浏览器的解决方案。
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="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">
Internet Explorer10怎么样？
您可以使用像gray这样的多边形填充。
Stack Overflow用户
发布于 2010-10-27 07:45:45
继brillout.com's answer和Roman Nurik's answer之后，并稍微放宽了“no SVG”的要求，你可以只使用一个SVG文件和一些CSS在火狐中去饱和化图像。
您的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>将其另存为resources.svg，从现在开始，它可以重用于任何您想要更改为灰度的图像。
在CSS中，您可以使用特定于Firefox的filter属性引用该过滤器：
.target {
filter: url(resources.svg#desaturate);
}如果你喜欢的话也可以加上微软专有的，apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8)。
SVG编辑：Here's a nice blog post，它描述了如何结合这里描述的CSS3方法在SalmanPK的答案中使用新的CSS3 filter属性。使用这种方法，你会得到类似这样的结果：
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 */
}Further browser support info here。
Stack Overflow用户
发布于 2012-11-30 14:57:02
对于火狐，你不需要创建一个filter.svg文件，你可以使用data URI scheme。
采用第一个答案的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+ */注意用您的文件编码替换"utf-8“字符串。
这种方法应该比其他方法更快，因为浏览器将不需要执行第二个HTTP请求。
https://stackoverflow.com/questions/609273
复制相似问题
腾讯云开发者
