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

Question

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

它不需要与IE兼容(我想它不会) - 如果它在FF3和/或Sf3中工作,这对我来说已经足够了.

我知道我可以用SVGCanvas和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/">

那么Internet Explorer 10呢？

你可以使用像灰色这样的polyfill .

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属性引用过滤器:

.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 */
}

而且浏览器支持的信息在这里.

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 polyfill: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:gray:",因此需要在头文件中使用兼容模式切换才能工作:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Answer 7

使用CSS实现灰度的最简单方法是通过该filter属性.

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

该属性仍未完全受支持,仍需要该-webkit-filter属性以支持所有浏览器.

Answer 8

即使使用CSS3或专有-webkit-或-moz-CSS属性,看起来也不可能.

但是,我确实发现了去年6月在HTML上使用SVG过滤器的这篇文章.在任何当前浏览器中都不可用(演示中暗示了自定义WebKit构建),但作为概念证明非常令人印象深刻.

Answer 9

在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 :-)

Answer 10

对于那些在其他答案中询问被忽略的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 testdrive的CSS3 Graphics部分和这个旧的IE博客http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Answer 11

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

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>

参考

兼容性矩阵

Answer 12

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

Answer 13

事实上，如果我没记错的话，使用 IE 来完成此操作会更容易使用专有的 CSS 属性。FILTER: Gray从http://www.ssi-developer.net/css/visual-filters.shtml尝试这个

Axe的方法只是使图像透明并在其后面有黑色背景。我相信你可能会说这是灰度。

虽然您不想使用 Javascript，但我认为您必须使用它。您还可以使用服务器端语言来完成此操作。