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

【问题标题】：Convert an image to grayscale in HTML/CSS在 HTML/CSS 中将图像转换为灰度
【发布时间】：2010-10-11 04:35:00
【问题描述】：

是否有一种简单的方法可以仅使用HTML/CSS 以灰度显示彩色位图？

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

我知道我可以同时使用 SVG 和 Canvas，但现在这似乎需要做很多工作。

真的有懒人的办法吗？

【问题讨论】：

“它不需要与 IE 兼容（我想它不会）”?? IE 提供了一组DX filters since 1997 (IE4)，它仅使用 CSS 和更多功能即可完成这项工作。现在他们拥有dropped DX filters in IE10 并且严格遵循基于标准 SVG 的过滤器。您可能想看看this 和this demo。
@vulcanraven 这不是真正的“纯粹的 CSS”——如果你在 IE 中禁用活动脚本，过滤器就会停止工作。
@robertc，没错。相反，如果您在任何浏览器中禁用 javascript，几乎包括 Stackoverflow 在内的所有 RIA 都将停止工作（除非 Web 开发人员实现了仅 HTML 版本的回退）。
只需使用 CSS stackoverflow.com/questions/286275/gray-out-image-with-css/… 在这个问题中得到我的答案

标签： image css grayscale

【解决方案1】：

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

&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png"&gt;

Internet Explorer 10 怎么样？

您可以使用像 gray 这样的 polyfill。

【讨论】：

@CamiloMartin CSS 过滤器仅受 Chrome 18+ 支持
更新： 最新稳定版 Google Chrome (19) 现在支持 CSS 过滤器。耶！ =)
Opera 有什么解决方案吗？
那么，IE10的解决方案是什么？
后人：@TomAuger，这个Q&A有针对IE10的具体说明。

【解决方案2】：

基于robertc's answer：

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

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（红-绿-蓝-alpha）模型的所有类型的图像。

关于为什么你应该使用矩阵的更多信息，我发布的更有可能是 robertc 的一个检查以下链接：

【讨论】：

我同意 0.3333 是错误的； 0.2126 0.7152 0.0722 0 0 似乎等同于 <fecolormatrix type="saturate" values="0">
“亮度和色差信号”的链接也断开了。我找不到替代品。

【解决方案3】：

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

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

该属性仍未得到完全支持，仍需要-webkit-filter 属性才能在所有浏览器中提供支持。

【讨论】：

【解决方案4】：

作为对其他人答案的补充，可以在 FF 中对图像进行去饱和处理，而不会遇到 SVG 的矩阵问题：

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

Reference on MDN

【讨论】：

【解决方案5】：

继 brillout.com's answer 和 Roman Nurik's answer 之后，稍微放宽“无 SVG”的要求，您可以在 Firefox 中仅使用单个 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);
}

如果您愿意，也可以添加 MS 专有的，apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8)。

编辑：Here's a nice blog post 描述了在 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 */
}

Further browser support info here.

【讨论】：

在 webkit 你这样做：-webkit-filter: grayscale(100%); 然后这个：-webkit-filter: grayscale(0); 删除它。
@SeanJA 感谢更新，WebKit 开始实现这些东西in December
我在我的 linux 笔记本电脑和我的 win7 机器上都在 chrome beta 中看到了它。它似乎在 linux 的 chrome stable 中不起作用（但话又说回来，linux 的版本可能落后于 windows）。
此方法在 Chrome 中适用于我，但在 Safari 中无效。在 FF 中，它使我的图像在悬停之前不可见。

【解决方案6】：

也许这种方式对你有帮助

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

w3schools.org

【讨论】：

【解决方案7】：

一种新的方法已经在现代浏览器上可用了一段时间。

background-blend-mode可以让你得到一些有趣的效果，其中之一就是灰度转换

设置在白色背景上的 luminosity 值允许它。（悬停以灰色显示）

.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}

&lt;div class="test"&gt;&lt;/div&gt;

亮度取自图像，颜色取自背景。因为它总是白色的，所以没有颜色。

但它允许更多。

您可以设置 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;
}

&lt;div class="test"&gt;&lt;/div&gt;

reference

compatibility matrix

【讨论】：

@Andy 我开始回答时说在现代浏览器中
如果图像使用img标签而不是background: url()，你如何应用它
@MohammadElbanna 你需要使用 mix-blend-mode 而不是 background-blend-mode

【解决方案8】：

你不需要使用那么多前缀来完全使用，因为如果你为旧的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%);
}

【讨论】：

【解决方案9】：

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

在 webkit 和 Firefox 中，目前无法仅使用 CSS 对图像进行去饱和处理。因此您需要使用画布或 SVG 作为客户端解决方案。

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

严格来说，由于 SVG 是 HTML，所以解决方案是纯 html+css :-)

【讨论】：

你好。我注意到你的灰度实际上在 safari 中失败了。有后续吗？谢谢
SVG 是 not HTML。这是一个完全不同的规范。
@CamiloMartin Here is SVG in the HTML spec.
@robertc 该链接是关于将 SVG 放入 HTML 中的，但这里是 SVG spec 和 HTML spec。两者彼此相似（或与 XML 相似）这一事实并不意味着它们是同一件事......
但它链接到reference 中的 SVG 规范...它没有定义 SVG，只是说浏览器应该解析它。在这方面它就像 Javascript 或 CSS。

【解决方案10】：

对于 Firefox 中的灰度百分比，请改用saturate filter：（搜索“饱和”）

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"

【讨论】：

【解决方案11】：

更新：我把它做成了一个完整的 GitHub 存储库，包括 IE10 和 IE11 的 JavaScript polyfill：https://github.com/karlhorky/gray

我最初使用SalmanPK's answer，但随后创建了以下变体以消除 SVG 文件所需的额外 HTTP 请求。内联 SVG 在 Firefox 10 及以上版本中工作，低于 10 的版本不再占全球浏览器市场的 1%。

此后，我一直在 this blog post 上更新解决方案，添加了对淡出颜色的支持、对 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%);
}

【讨论】：

【解决方案12】：

对于 Firefox，您不需要创建 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 请求。

【讨论】：

只是为了省去头疼的注意事项：YUI Compressor 会去除数据 url 中的空格。所以如果你想使用这个解决方案，你可以考虑使用另一个缩小器。
@Malte 或者只是用“%20”字符串替换空格？
@mquandalle 不幸的是 IE10 不支持 filter:gray blogs.msdn.com/b/ie/archive/2011/12/07/…
在 Firefox 上我的灰色很浅。有什么办法可以增加对比度或稍微变暗？其他浏览器看起来很棒。

【解决方案13】：

如果您或其他人将来面临类似问题，则对 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);

?>

【讨论】：

@Tom，根据对原始问题的投票和收藏，OP 并不是唯一一个想知道这是否可能的人。当然，这个答案可能会违反规则，但我认为否决一个可能对很多人有用的答案没有意义。
@Tom，我虽然可能不是对这个问题的准确回答，但它可能会派上用场，因为它实际上“解决”了灰度问题，而没有 javascript 的“麻烦”，也许他甚至没有考虑或知道 PHP GD，没有恶意。 @mlms13 正是这一点，谢谢 :)
那是我的错，关于其他用户可以从这篇文章中受益的“想法”从我的脑海中消失了。道歉@Trufa。
这确实帮助了我，让我在其他几个死胡同之后走上了正轨。我发现使用“imagefilter($source, IMG_FILTER_GRAYSCALE);”虽然给出了更好的结果。（仅限 PHP 5）
投了反对票，因为它几乎跑题了。在服务器端对图像进行灰度化与 CSS/HTML 完全不同。

【解决方案14】：

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

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

有一个互动demo。你可以玩弄它。

查看使用文档，非常简单。 docs

【讨论】：

【解决方案15】：

这是一个用于 LESS 的 mixin，可让您选择任何不透明度。为纯 CSS 以不同的百分比自行填写变量。

这里的提示，它使用饱和类型的矩阵，所以你不需要做任何花哨的事情来改变百分比。

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

【讨论】：

【解决方案16】：

今天刚遇到同样的问题。我最初使用SalmanPK solution，但发现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 不再支持标准兼容模式下的“过滤器：灰色：”，因此需要在标头中切换兼容模式才能工作：

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

【讨论】：

似乎是一个更好、更简单的解决方案 - 如果 SalmanPK 和 mquandalle 更新他们的解决方案会很好。显然他们使用的矩阵is broken

这是嵌入式数据版本：filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");

【解决方案17】：

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

【讨论】：

【解决方案18】：

您可以使用 jFunc 的功能之一 - 使用功能“jFunc_CanvasFilterGrayscale” http://jfunc.com/jFunc-functions.aspx

【讨论】：

【解决方案19】：

be 旧版浏览器的替代方案可以使用由伪元素或内联标签产生的掩码。

绝对定位悬停在img（或不需要点击或选择的文本区域）可以非常接近地模拟色阶的效果，通过rgba() 或translucide png。

它不会给出一个单一的色阶，但会在范围之外对颜色进行着色。

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

【讨论】：

【解决方案20】：

从当前版本 19.0.1084.46 开始支持 webkit 中的原生 CSS 过滤器

so -webkit-filter: grayscale(1) 将起作用，并且比用于 webkit 的 SVG 方法更容易...

【讨论】：

【解决方案21】：

如果您能够使用 JavaScript，那么此脚本可能就是您正在寻找的。它可以跨浏览器工作，到目前为止对我来说工作正常。您不能将它用于从不同域加载的图像。

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

【讨论】：

【解决方案22】：

如果我没记错的话，实际上使用 IE 更容易使用专有的 CSS 属性。试试这个来自http://www.ssi-developer.net/css/visual-filters.shtml的FILTER: Gray

Ax 的方法只是使图像透明并在其后有黑色背景。我敢肯定你会说这是灰度。

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

【讨论】：

我什至没有 Windows 盒子，所以谢谢，但这对我来说用处不大。
在这种情况下，您可以使用带有 IE 的虚拟机查看它，实现 ax 的方法或使用画布...请注意，使用画布对大图像进行灰度处理可能对 Javascript 引擎造成很大负担。
filter: gray 自 第 4 版 起出现在 Internet Explorer 中。他们为他们的产品做了很多废话——没错！ - 但他们在这些东西上真的超前了

【解决方案23】：

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

所以我用谷歌搜索了“canvas grayscale”，第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html，这似乎有效。

【讨论】：

【解决方案24】：

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

如果您的用户正在使用最先进的浏览器并且如果 Firefox 3.5 和 Safari 4 支持它（我不知道是否会这样做），您可以调整图像的 CSS color-profile 属性，将其设置为灰度 ICC 配置文件 URL。但这是很多假设！

【讨论】：

【解决方案25】：

（目前）看起来不太可能，即使使用 CSS3 或专有的 -webkit- 或 -moz- CSS 属性。

但是，我确实找到了在 HTML 上使用 SVG 过滤器的 this post from last June。在任何当前浏览器中都不可用（演示暗示了自定义 WebKit 构建），但作为概念证明非常令人印象深刻。

【讨论】：