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

时间 2020-01-08

标签 html css 中将图像转换灰度栏目 HTML 繁體版

原文原文链接

有没有一种简单的方法能够用HTML/CSS显示灰度的彩色位图？ css

它不须要与IE兼容（我想它不会） - 若是它在FF3和/或Sf3中工做，这对我来讲已经足够了。 html

我知道我能够用SVG和Canvas来作，但如今看起来不少工做。 css3

有一个真正懒惰的人这样作的方法吗？ git

#1楼

从当前版本19.0.1084.46添加了对webkit中的本机CSS过滤器的支持 github

因此-webkit-filter：grayscale（1）能够工做，比webkit的SVG方法更容易... web

#2楼

更新：我把它变成了一个完整的GitHub仓库，包括用于IE10和IE11的JavaScript polyfill： https ： //github.com/karlhorky/gray 浏览器

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

从那之后，我一直在这篇博文上更新解决方案，增长了对淡入淡出的支持，对SVG的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%);
}

#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请求。

#4楼

对于那些在其余答案中询问被忽略的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

#5楼

是旧浏览器的替代方案多是使用伪元素或内联标记生成的掩码。

绝对定位悬停img（或不须要点击或选择的文本区域）能够经过rgba（）或translucide png密切模仿色标的影响。

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

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