将图像转换为HTML / CSS中的灰度

是否有一个简单的方法来显示一个灰度的颜色位图只有HTML/CSS ？

它不需要与IE兼容（我想这不会是） – 如果它在FF3和/或Sf3中工作，这对我来说已经足够了。

我知道我可以用SVG和Canvas来完成，但是现在看起来像很多工作。

有没有一个真正的懒惰的人的方式来做到这一点？

Answer 1

对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/"> 

Answer 2

继brillout.com的回答以及Roman Nurik的回答之后 ，放松了一下“没有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属性来引用过滤filter ：

 .target { filter: url(resources.svg#desaturate); } 

如果你喜欢，也可以添加MS专有的， 把这个类应用到你想要转换成灰度的图像（在Firefox> 3.5，IE8下工作） 。

编辑 ： 这是一个很好的博客文章 ，描述了在SalmanPK的答案中使用新的CSS3 filter属性，与此处描述的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 */ } 

更多的浏览器支持信息 。

Answer 3

对于Firefox你不需要创建一个filter.svg文件，你可以使用数据URI方案 。

拿起第一个答案的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请求。

Answer 4

更新：我做了一个完整的GitHub回购，包括IE10和IE11的JavaScript填充： https ： //github.com/karlhorky/gray

我最初使用SalmanPK的答案 ，但后来创建了下面的变化，以消除SVG文件所需的额外的HTTP请求。 内联SVG适用于Firefox 10或更高版本，低于10的版本不再占据全球浏览器市场的1％。

之后，我一直在这个博客文章中更新解决方案，增加了对颜色淡化的支持，对SVG的IE 10/11支持以及演示中的部分灰度。

 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%); } 

Answer 5

如果你能够使用JavaScript，那么这个脚本可能是你正在寻找的。 它工作跨浏览器，并为我工作到目前为止罚款。 您不能将其与从不同域加载的图像一起使用。

http://james.padolsey.com/demos/grayscale/

Answer 6

今天刚刚得到同样的问题。 我最初使用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" /> 

Answer 7

看起来好像还不可能（即使是CSS3或专有的-webkit-或-moz- CSS属性）。

不过，我从去年6月份就已经在HTML上使用了SVG过滤器。 在任何当前的浏览器（演示暗示在一个自定义的WebKit构建）不可用，但作为概念证明非常令人印象深刻。

Answer 8

对于在其他答案中询问被忽略的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(&quot;#filtersPicture&quot;)" 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测试的CSS3图形部分和这个旧的IE博客http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Answer 9

在Internet Explorer中使用过滤器属性。

在webkit和Firefox中，目前没有办法仅仅通过CSS来去除图像。 因此您需要使用canvas或SVG作为客户端解决方案。

但是我认为使用SVG更加优雅。 查看我的博客文章，了解适用于Firefox和webkit的SVG解决方案： http : //webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

严格来说，因为SVG是HTML解决方案是纯HTML + CSS 🙂

Answer 10

在现代浏览器上已经有了一段时间了。

背景混合模式可以让你得到一些有趣的效果，其中之一是灰度转换

设置在白色背景上的值光度允许。 （悬停看它灰色）

 .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> 

Answer 11

也许这种方式可以帮助你

 img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 

w3schools.org

Answer 12

事实上，如果我没有正确使用专有的CSS属性，使用IE浏览器更容易。 从http://www.ssi-developer.net/css/visual-filters.shtml试试这个;FILTER: Gray

由Ax的方法只是使图像透明，背后有一个黑色的背景。 我敢肯定，你可能会认为这是灰度。

虽然你不想使用Javascript，我想你必须使用它。 你也可以使用服务器端语言来做到这一点。

Answer 13

如果您愿意使用Javascript，那么您可以使用画布将图像转换为灰度。 由于Firefox和Safari支持<canvas> ，它应该工作。

所以我GOOGLE了“帆布灰度”，第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html这似乎工作。;

Answer 14

在当前版本19.0.1084.46中添加了对webkit中原生CSS过滤器的支持

所以-webkit-filter：灰度（1）将工作，并且比webkit的SVG方法更容易…

Answer 15

这是一个混合LESS，可以让你选择任何不透明度。 在不同的百分比下自己填写变量。

整洁的提示在这里 ，它使用饱和类型的矩阵，所以你不需要做任何幻想改变百分比。

 .saturate(@value:0) { @percent: percentage(@value); filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='saturate'%20values='@value'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: grayscale(@percent); /* Current draft standard */ -webkit-filter: grayscale(@percent); /* New WebKit */ -moz-filter: grayscale(@percent); -ms-filter: grayscale(@percent); -o-filter: grayscale(@percent); } 

然后使用它：

 img.desaturate { transition: all 0.2s linear; .saturate(0); &:hover { .saturate(1); } } 

Answer 16

你不需要使用这么多的前缀，因为如果你选择旧的Firefox的前缀，你不需要使用新的Firefox的前缀。

所以充分利用，足够使用这个代码：

 img.grayscale { 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 */ -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ } img.grayscale.disabled { 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"); filter: none; -webkit-filter: grayscale(0%); } 

Answer 17

最简单的方法来做到这一点

 img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); 

}

Answer 18

如果您或将来面临类似问题的其他人开放给PHP。 （我知道你说的HTML / CSS，但也许你已经在后端使用PHP）这是一个PHP解决方案：

我从PHP GD库得到它，并添加了一些变量来自动化过程…

 <?php $img = @imagecreatefromgif("php.gif"); if ($img) $img_height = imagesy($img); if ($img) $img_width = imagesx($img); // Create image instances $dest = imagecreatefromgif('php.gif'); $src = imagecreatefromgif('php.gif'); // Copy and merge - Gray = 20% imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20); // Output and free from memory header('Content-Type: image/gif'); imagegif($dest); imagedestroy($dest); imagedestroy($src); ?> 

Answer 19

根据robertc的回答 ：

要从彩色图像正确转换为灰度图像，而不是像这样使用矩阵：

 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 

你应该使用这样的转换矩阵：

 0.299 0.299 0.299 0 0.587 0.587 0.587 0 0.112 0.112 0.112 0 0 0 0 1 

这应该适用于基于RGBA（红绿蓝）模型的所有类型的图像。

更多的信息为什么你应该使用矩阵我发布更可能的罗伯特的一个检查下面的链接：

• 亮度和色差信号
• Margus的回答是：“colorvalue中的灰度值”@stackoverflow部分： 编辑2：@Hans Passant
• Charles A. Bouman – 普渡大学 – 模拟电视第20页和第21页
• 在这里你可以找到一些C＃和VB代码

Answer 20

作为对其他答案的补充，在没有SVG 矩阵的头痛的情况下，可以在FF上将图像去饱和一半：

 <feColorMatrix type="saturate" values="$v" /> 

$v在0和1之间。 它相当于filter:grayscale(50%); 。

现场示例：

 .desaturate { filter: url("#desaturate"); -webkit-filter: grayscale(50%); } figcaption{ background: rgba(55, 55, 136, 1); padding: 4px 98px 0 18px; color: white; display: inline-block; border-top-left-radius: 8px; border-top-right-radius: 100%; font-family: "Helvetica"; } 

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="desaturate"> <feColorMatrix type="saturate" values="0.4"/> </filter> </svg> <figure> <figcaption>Original</figcaption> <img src="http://www.placecage.com/c/500/200"/> </figure> <figure> <figcaption>Half grayed</figcaption> <img class="desaturate" src="http://www.placecage.com/c/500/200"/> </figure> 

Answer 21

一个可怕但可行的解决方案：使用Flash对象渲染图像，然后在Flash中为您提供所有可能的转换。

如果您的用户正在使用流行的浏览器， 并且 Firefox 3.5和Safari 4支持它（我不知道是否会这样做），您可以调整图像的CSS color-profile属性，将其设置为灰度ICC个人资料网址。 但是，这是很多，如果！

Answer 22

是旧的浏览器的替代品可能是使用由伪元素或内联标签产生的掩码。

绝对定位悬停img（或者不需要点击或选择的文本区域）可以通过rgba（）或者translucide png来模拟色彩效果。

它不会给一个单一的色彩比例，但会使色彩超出范围。

通过伪元素测试10种不同颜色的代码笔，最后是灰色的。 http://codepen.io/gcyrillus/pen/nqpDd （重新加载切换到另一个图像）

Answer 23

你可以使用jFunc的一个函数 – 使用函数“jFunc_CanvasFilterGrayscale” http://jfunc.com/jFunc-functions.aspx

Answer 24

试试这个jquery插件。 虽然，这不是一个纯粹的HTML和CSS解决方案，但它是一种懒惰的方式来实现你想要的。 您可以自定义您的灰度以最适合您的使用。 使用它如下：

 $("#myImageID").tancolor(); 

有一个互动演示 。 你可以玩它。

查看使用的文档，这很简单。 文档

Answer 25

对于Firefox中灰度的百分比，请使用饱和度过滤器 ：（搜索“饱和度”）

 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='saturate'><feColorMatrix in='SourceGraphic' type='saturate' values='0.2' /></filter></svg>#saturate"