有没有一种简单的方法可以用灰度显示彩色位图HTML/CSS？
它不需要与IE兼容（我想也不会）-如果它可以在FF3和/或Sf3中使用，对我来说已经足够了。
我知道我可以同时使用SVGCanvas和Canvas，但是现在看来这需要大量工作。
有没有真正懒惰的人做到这一点？
在HTML / CSS中将图像转换为灰度
第1895篇《在HTML / CSS中将图像转换为灰度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共15个回答
be An alternative for older browser could be to use mask produced by pseudo-elements or inline tags.
Absolute positionning hover an img (or text area wich needs no click nor selection) can closely mimic effects of color scale , via rgba() or translucide png .
It will not give one single color scale, but will shades color out of range.
test on code pen with 10 different colors via pseudo-element, last is gray . http://codepen.io/gcyrillus/pen/nqpDd (reload to switch to another image)
support for native CSS filters in webkit has been added from the current version 19.0.1084.46
so -webkit-filter: grayscale(1) will work and which is easier than SVG approach for webkit...
如果我记得正确使用私有CSS属性，实际上使用IE会更容易。FILTER: Gray从http://www.ssi-developer.net/css/visual-filters.shtml尝试一下
Axe的方法只是使图像透明并在其后面具有黑色背景。我敢肯定，您可以说这是灰度的。
尽管您不想使用Javascript，但我认为您必须使用它。您也可以使用服务器端语言来实现。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
也许这样可以帮助你
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
现代浏览器已经有一段时间提供了一种新的方法。
background-blend-mode可让您获得一些有趣的效果，其中之一就是灰度转换
设置在白色背景上的亮度值允许使用。（悬停以灰色显示）
.test {
width: 300px;
height: 200px;
background: url("http://placekitten.com/1000/750"), white;
background-size: cover;
}
.test:hover {
background-blend-mode: luminosity;
}<div class="test"></div>从图像中获取光度，从背景中获取颜色。由于始终为白色，因此没有颜色。
但是它允许更多。
您可以为效果设置3层设置动画。第一个是图像，第二个是白黑渐变。如果对此应用乘法混合模式，则在白色部分上将获得与以前一样的白色结果，但是在黑色部分上的原始图像（乘以白色将得到白色，而乘以黑色则无效）。
在渐变的白色部分，您将获得与以前相同的效果。在渐变的黑色部分上，您将图像混合在其自身上，结果是未修改的图像。
现在，所需要做的就是移动渐变以使该效果动态化：（悬停以彩色显示）
div {
width: 600px;
height: 400px;
}
.test {
background: url("http://placekitten.com/1000/750"),
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750");
background-position: 0px 0px, 0px 0%, 0px 0px;
background-size: cover, 100% 300%, cover;
background-blend-mode: luminosity, multiply;
transition: all 2s;
}
.test:hover {
background-position: 0px 0px, 0px 66%, 0px 0px;
}<div class="test"></div>在Internet Explorer中使用filter属性。
在webkit和Firefox中，当前无法仅通过CSS对图像进行脱字符处理。因此，您需要使用canvas或SVG作为客户端解决方案。
但是我认为使用SVG更为优雅。查阅我的博客文章，了解适用于Firefox和Webkit的SVG解决方案：http : //webdev.brillout.com/2010/10/desaturate-image-without-javascript.html
严格来说，由于SVG是HTML，所以解决方案是纯html + 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;
}
应用于此标记：
<!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>
有关更多演示，请查看IE testdrive的CSS3图形部分和此旧的IE博客http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
仅使用CSS来实现灰度的最简单方法是通过filter属性。
img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
该属性仍然不受完全支持，仍然需要该-webkit-filter属性在所有浏览器中提供支持。
今天遇到了同样的问题。我最初使用SalmanPK解决方案，但发现效果在FF和其他浏览器之间有所不同。这是因为转换矩阵仅适用于亮度，而不适用于像Chrome / IE中的滤镜那样的亮度。令我惊讶的是，我发现SVG中的其他更简单的解决方案也可以在FF4 +中使用并产生更好的结果：
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>
使用CSS：
img {
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
另一个警告是IE10在符合标准的模式下不再支持“ filter：grey：”，因此需要在标头中切换兼容模式才能工作：
<meta http-equiv="X-UA-Compatible" content="IE=9" />
如果您能够使用JavaScript，那么此脚本可能就是您想要的。它可以跨浏览器运行，到目前为止对我来说还不错。您不能将其与从其他域加载的图像一起使用。
从brillout.com的答案以及Roman Nurik的答案开始，并稍微放松了“ no SVG”的要求，您可以仅使用单个SVG文件和一些CSS使Firefox中的图像去饱和。
您的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);
}
如果您愿意，也可以添加MS专有的，将其应用于要转换为灰度的任何图像（在Firefox> 3.5，IE8中有效）。
编辑： 这是一篇不错的博客文章，它描述了如何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 */
}
对CSS筛选器的支持已进入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="http://lorempixel.com/400/200/">Internet Explorer 10呢？
您可以使用灰色的polyfill 。
相似问题
问题类别
You can use one of the functions of jFunc - use the function "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx