blocks|key|1675415|text|事实上，如果我没记错的话，使用IE更容易做到这一点。从http://www.ssi-developer.net/css/visual-filters.shtml尝试此FILTER:+Gray|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1675416|Ax的方法只是简单地使图像透明，并在其后面有一个黑色背景。我相信你会说这是灰度的。|1675417|虽然您不想使用Javascript，但我认为您必须使用它。您也可以使用服务器端语言来完成此任务。|1675418|entityMap|0|LINK|mutability|MUTABLE|url|http://www.ssi-developer.net/css/visual-filters.shtml|1|https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css/609302#609302^0|2B|C|R|1H|0|0|0|2|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

<p>It's in fact easier to do it with IE if I remember correctly using a proprietary CSS property. Try this <code>FILTER: Gray</code> from <a href="http://www.ssi-developer.net/css/visual-filters.shtml" rel="nofollow noreferrer">http://www.ssi-developer.net/css/visual-filters.shtml</a></p>

<p>The method by <a href="https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css/609302#609302">Ax</a> simply makes the image transparent and has a black background behind it. I'm sure you could argue this is grayscale.</p>

<p>Although you didn't want to use Javascript, I think you'll have to use it. You could also use a server side language to do it.</p>


blocks|key|5204412|text|即使使用CSS3或专有的-webkit-或-moz-+CSS属性，这看起来也是不可能的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5204413|但是，我确实发现了在HTML上使用SVG过滤器的this+post+from+last+June。在当前的任何浏览器中都不可用(该演示暗示了一个自定义的WebKit构建)，但作为一个概念证明，它给人留下了深刻的印象。|5204414|entityMap|0|LINK|mutability|MUTABLE|url|http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html^0|C|8|L|5|0|O|O|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>Doesn't look like it's possible (yet), even with CSS3 or proprietary <code>-webkit-</code> or <code>-moz-</code> CSS properties.</p>

<p>However, I did find <a href="http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html" rel="noreferrer">this post from last June</a> that used SVG filters on HTML. Not available in any current browser (the demo hinted at a custom WebKit build), but very impressive as a proof of concept.</p>


blocks|key|1675484|text|一个糟糕但可行的解决方案:使用Flash对象渲染图像，然后在Flash中提供所有可能的变换。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1675485|如果你的用户正在使用最先进的浏览器和如果Firefox3.5和Safari4支持它(我不知道是否支持)，你可以调整图像的CSS颜色配置文件属性，将其设置为灰度ICC配置文件URL。但这是一个很大的如果！|offset|length|style|BOLD|1675486|entityMap^0|0|0|2T|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>One terrible but workable solution: render the image using a Flash object, which then gives you all the transformations possible in Flash.</p>

<p><strong>If</strong> your users are using bleeding-edge browsers and <strong>if</strong> Firefox 3.5 and Safari 4 support it (I don't know that either do/will), you could adjust the CSS <em>color-profile</em> attribute of the image, setting it to a grayscale ICC profile URL. But that's a lot of if's!</p>


blocks|key|1461213|text|如果您或将来面临类似问题的其他人对PHP持开放态度。(我知道你说的是HTML/CSS，但可能你已经在后台使用PHP了)下面是一个PHP解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1461214|我从PHP+GD库中获得了它，并添加了一些变量来自动化这个过程……|1461215|<?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%25
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);

?>|code-block|syntax|javascript|1461216|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you, or someone else facing a similar problem in future are open to PHP.
(I know you said HTML/CSS, but maybe you are already using PHP in the backend)
Here is a PHP solution:</p>

<p>I got it from the PHP GD library and added some variable to automate the process...</p>

<pre class="lang-php prettyprint-override"><code>&lt;?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);

?&gt;
</code></pre>


blocks|key|1675554|text|如果您愿意使用Javascript，那么您可以使用画布将图像转换为灰度。因为火狐和Safari支持<canvas>，所以它应该可以工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1675555|所以我在谷歌上搜索“画布灰度”，第一个结果是http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html，它似乎起作用了。|1675556|entityMap|0|LINK|mutability|MUTABLE|url|http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html^0|1D|8|0|M|1O|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>If you're willing to use Javascript, then you can use a canvas to convert the image to grayscale. Since Firefox and Safari support <code>&lt;canvas&gt;</code>, it should work.</p>

<p>So I googled "canvas grayscale", and the first result was <a href="http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html" rel="nofollow">http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html</a> which seems to work.</p>


blocks|key|3786779|text|在Internet+Explorer中使用filter属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3786780|在webkit和Firefox中，目前还没有办法单独使用CSS来对图像进行去纹理处理。因此，对于客户端解决方案，您需要使用canvas或SVG。|3786781|但我认为使用SVG更优雅。请查看我的博客文章，了解同时适用于Firefox和webkit的SVG解决方案：http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html|offset|length|3786782|严格地说，因为SVG是HTML语言，所以解决方案是纯html%2Bcss+:-)|3786783|entityMap|0|LINK|mutability|MUTABLE|url|http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html^0|0|0|1H|23|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>In Internet Explorer use the filter property.</p>

<p>In webkit and Firefox there is currently no way to desatuarte an image solely with CSS.
so you will need to use either canvas or SVG for a client side solution.</p>

<p>But I think using SVG is more elegant. check out my blog post for the SVG solution that works for both Firefox and webkit:
<a href="http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html" rel="nofollow">http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html</a></p>

<p>And strictly speaking since SVG is HTML the solution is pure html+css :-)</p>


blocks|key|5204707|text|继brillout.com's+answer和Roman+Nurik's+answer之后，并稍微放宽了“no+SVG”的要求，你可以只使用一个SVG文件和一些CSS在火狐中去饱和化图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5204708|您的SVG文件将如下所示：|5204709|<?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>|code-block|syntax|javascript|5204710|将其另存为resources.svg，从现在开始，它可以重用于任何您想要更改为灰度的图像。|5204711|在CSS中，您可以使用特定于Firefox的filter属性引用该过滤器：|style|CODE|5204712|.target+{
++++filter:+url(resources.svg#desaturate);
}|5204713|如果你喜欢的话也可以加上微软专有的，apply+that+class+to+any+image+you+want+to+convert+to+greyscale+(works+in+Firefox+>3.5,+IE8)。|5204714|SVG编辑：Here's+a+nice+blog+post，它描述了如何结合这里描述的CSS3方法在SalmanPK的答案中使用新的CSS3+filter属性。使用这种方法，你会得到类似这样的结果：|5204715|img.desaturate{
++++filter:+gray;+/*+IE+*/
++++-webkit-filter:+grayscale(1);+/*+Old+WebKit+*/
++++-webkit-filter:+grayscale(100%25);+/*+New+WebKit+*/
++++filter:+url(resources.svg#desaturate);+/*+older+Firefox+*/
++++filter:+grayscale(100%25);+/*+Current+draft+standard+*/
}|5204716|Further+browser+support+info+here。|5204717|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css/4027029#4027029|1|https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css/979261#979261|2|http://www.boogdesign.com/examples/svg/desaturate.html|3|http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS|4|http://caniuse.com/#feat=css-filters^0|1|L|0|N|K|1|0|0|0|0|M|6|0|0|I|2J|2|0|1Z|6|6|N|3|0|0|0|X|4|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]|$A|1K|B|1L|1|1M]]|C|$]]|$1|D|3|E|5|6|7|1N|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1O|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1P|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1Q|8|@$A|1R|B|1S|O|P]]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1T|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1U|8|@]|9|@$A|1V|B|1W|1|1X]]|C|$]]|$1|U|3|V|5|6|7|1Y|8|@$A|1Z|B|20|O|P]]|9|@$A|21|B|22|1|23]]|C|$]]|$1|W|3|X|5|H|7|24|8|@]|9|@]|C|$I|J]]|$1|Y|3|Z|5|6|7|25|8|@]|9|@$A|26|B|27|1|28]]|C|$]]|$1|10|3|-4|5|6|7|29|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]|18|$5|13|14|15|C|$16|19]]|1A|$5|13|14|15|C|$16|1B]]|1C|$5|13|14|15|C|$16|1D]]|1E|$5|13|14|15|C|$16|1F]]]]

<p>Following on from <a href="https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css/4027029#4027029">brillout.com's answer</a>, and also <a href="https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css/979261#979261">Roman Nurik's answer</a>, and relaxing somewhat the the 'no SVG' requirement, you can desaturate images in Firefox using only a single SVG file and some CSS.</p>

<p>Your SVG file will look like this:</p>

<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"&gt;
    &lt;filter id="desaturate"&gt;
        &lt;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"/&gt;
    &lt;/filter&gt;
&lt;/svg&gt;
</code></pre>

<p>Save that as resources.svg, it can be reused from now on for any image you want to change to greyscale.</p>

<p>In your CSS you reference the filter using the Firefox specific <code>filter</code> property:</p>

<pre><code>.target {
    filter: url(resources.svg#desaturate);
}
</code></pre>

<p>Add the MS proprietary ones too if you feel like it, <a href="http://www.boogdesign.com/examples/svg/desaturate.html" rel="noreferrer">apply that class to any image you want to convert to greyscale (works in Firefox >3.5, IE8)</a>.</p>

<p><strong>edit</strong>:  <a href="http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS" rel="noreferrer">Here's a nice blog post</a> which describes using the new CSS3 <code>filter</code> property in SalmanPK's answer in concert with the SVG approach described here.  Using that approach you'd end up with something like:</p>

<pre><code>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 */
}
</code></pre>

<p><a href="http://caniuse.com/#feat=css-filters" rel="noreferrer">Further browser support info here</a>.</p>


blocks|key|3786860|text|如果您能够使用JavaScript，则此脚本可能就是您要查找的脚本。它可以跨浏览器工作，到目前为止对我来说工作得很好。您不能将其用于从不同域加载的图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3786861|http://james.padolsey.com/demos/grayscale/|offset|length|3786862|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|16|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>If you are able to use JavaScript, then this script may be what you are looking for. It works cross browser and is working fine for me so far. You can't use it with images loaded from a different domain.</p>

<p><a href="http://james.padolsey.com/demos/grayscale/" rel="noreferrer">http://james.padolsey.com/demos/grayscale/</a></p>


blocks|key|1457018|text|Support+for+CSS+filters+has+landed+in+Webkit.所以我们现在有了一个跨浏览器的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1457019|​|1457020|img+{
++filter:+gray;+/*+IE6-9+*/
++-webkit-filter:+grayscale(1);+/*+Google+Chrome,+Safari+6%2B+&+Opera+15%2B+*/
++filter:+grayscale(1);+/*+Microsoft+Edge+and+Firefox+35%2B+*/
}

/*+Disable+grayscale+on+hover+*/
img:hover+{
++-webkit-filter:+grayscale(0);
++filter:+none;
}|code-block|syntax|javascript|1457021|<img+src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">|1457022|1457023|1457024|+Internet+Explorer10怎么样？|style|BOLD|1457025|您可以使用像gray这样的多边形填充。|1457026|entityMap|0|LINK|mutability|MUTABLE|url|http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit|1|https://github.com/karlhorky/gray^0|0|19|0|0|0|0|0|0|0|0|O|0|6|4|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|1B|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|1D|8|@$A|1E|B|1F|Q|R]]|9|@]|C|$]]|$1|S|3|T|5|6|7|1G|8|@]|9|@$A|1H|B|1I|1|1J]]|C|$]]|$1|U|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]]]

<p><a href="http://updates.html5rocks.com/2011/12/CSS-Filter-Effects-Landing-in-WebKit" rel="noreferrer">Support for CSS filters has landed in Webkit.</a>  So we now have a cross-browser solution.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ &amp; Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&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;</code></pre>
</div>
</div>
</p>
<hr />
<p><strong>What about Internet Explorer 10?</strong></p>
<p>You can use a polyfill like <a href="https://github.com/karlhorky/gray" rel="noreferrer">gray</a>.</p>


blocks|key|5204811|text|今天也遇到了同样的问题。我最初使用的是SalmanPK+solution，但发现FF和其他浏览器的效果有所不同。这是因为转换矩阵只对亮度起作用，而不像Chrome/IE中的滤镜那样对亮度起作用。令我惊讶的是，我发现SVG中的另一种更简单的解决方案也适用于FF4%2B，并产生更好的结果：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5204812|<svg+xmlns="http://www.w3.org/2000/svg">
++<filter+id="desaturate">
++++<feColorMatrix+type="saturate"+values="0"/>
++</filter>
</svg>|code-block|syntax|javascript|5204813|使用css：|5204814|img+{
++++filter:+url(filters.svg#desaturate);+/*+Firefox+3.5%2B+*/
++++filter:+gray;+/*+IE6-9+*/
++++-webkit-filter:+grayscale(1);+/*+Google+Chrome+&+Safari+6%2B+*/
}|5204815|另一个警告是，IE10不再支持标准兼容模式下的"filter:+gray:“，因此需要在headers中切换兼容模式才能工作：|5204816|<meta+http-equiv="X-UA-Compatible"+content="IE=9"+/>|5204817|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/8612047/933464^0|J|H|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>Just got the same problem today. I've initially used <a href="https://stackoverflow.com/a/8612047/933464">SalmanPK solution</a> but found out that effect differs between FF and other browsers. That's because conversion matrix works on lightness only not luminosity like filters in Chrome/IE . To my surprise I've found out that alternative and simpler solution in SVG also works in FF4+ and produces better results:</p>

<pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="desaturate"&gt;
    &lt;feColorMatrix type="saturate" values="0"/&gt;
  &lt;/filter&gt;
&lt;/svg&gt;
</code></pre>

<p>With css:</p>

<pre class="lang-css prettyprint-override"><code>img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome &amp; Safari 6+ */
}
</code></pre>

<p>One more caveat is that IE10 doesn't support "filter: gray:" in standards compliant mode anymore, so needs compatibility mode switch in headers to work:</p>

<pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=9" /&gt;
</code></pre>


blocks|key|1457069|text|从当前版本19.0.1084.46开始，webkit中添加了对原生CSS过滤器的支持|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1457070|所以-webkit-filter:灰度(1)将会起作用，这比webkit的SVG方法更容易...|1457071|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>support for native CSS filters in webkit has been added from the current version 19.0.1084.46</p>

<p>so -webkit-filter: grayscale(1) will work and which is easier than SVG approach for webkit...</p>


blocks|key|1675861|text|更新:我将其添加到一个完整的GitHub存储库中，包括IE10和IE11的JavaScript+polyfill：https://github.com/karlhorky/gray|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1675862|我最初使用的是SalmanPK's+answer，但后来创建了下面的变体，以消除SVG文件所需的额外HTTP请求。内联SVG适用于Firefox版本10和更高版本，低于10的版本甚至不再占据全球浏览器市场的1%25。|1675863|从那以后，我一直在this+blog+post上更新解决方案，在演示中添加了对淡入淡出的支持，对IE10/11的支持，以及对部分灰度的支持。|1675864|img.grayscale+{
++/*+Firefox+10%2B,+Firefox+on+Android+*/
++filter:+url("data:image/svg%2Bxml;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%2B,+Safari+6%2B,+Safari+6%2B+iOS+*/
++-webkit-filter:+grayscale(100%25);
}

img.grayscale.disabled+{
++filter:+none;
++-webkit-filter:+grayscale(0%25);
}|code-block|syntax|javascript|1675865|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/karlhorky/gray|1|https://stackoverflow.com/a/8612047/1268612|2|http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html^0|0|2I|1L|X|0|0|0|2Y|7|H|1|0|0|1Y|9|E|2|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|H|3|I|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]|Y|$5|R|S|T|E|$U|Z]]]]

<p><strong>Update:</strong> I made this into a full GitHub repo, including JavaScript polyfill for IE10 and IE11: <a href="https://github.com/karlhorky/gray" rel="noreferrer">https://github.com/karlhorky/gray</a></p>

<p>I originally used <a href="https://stackoverflow.com/a/8612047/1268612">SalmanPK's answer</a>, but then created the variation below to eliminate the extra HTTP request required for the SVG file. The inline SVG works in Firefox versions 10 and above, and versions lower than 10 no longer account for even 1% of the global browser market.</p>

<p>I have since been keeping the solution updated on <a href="http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html" rel="noreferrer">this blog post</a>, adding support for fading back to color, IE 10/11 support with SVG, and partial grayscale in the demo.</p>

<pre><code>img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter id='grayscale'&gt;&lt;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'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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%);
}
</code></pre>


blocks|key|1457109|text|对于火狐，你不需要创建一个filter.svg文件，你可以使用data+URI+scheme。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1457110|采用第一个答案的css代码如下：|1457111|filter:+url("data:image/svg%2Bxml;utf8,<svg%2520xmlns='http://www.w3.org/2000/svg'><filter%2520id='grayscale'><feColorMatrix%2520type='matrix'%2520values='0.3333%25200.3333%25200.3333%25200%25200%25200.3333%25200.3333%25200.3333%25200%25200%25200.3333%25200.3333%25200.3333%25200%25200%25200%25200%25200%25201%25200'/></filter></svg>#grayscale");+/*+Firefox+3.5%2B+*/
filter:+grayscale(100%25);+/*+Current+draft+standard+*/
-webkit-filter:+grayscale(100%25);+/*+New+WebKit+*/
-moz-filter:+grayscale(100%25);
-ms-filter:+grayscale(100%25);+
-o-filter:+grayscale(100%25);
filter:+gray;+/*+IE6%2B+*/|code-block|syntax|javascript|1457112|注意用您的文件编码替换"utf-8“字符串。|1457113|这种方法应该比其他方法更快，因为浏览器将不需要执行第二个HTTP请求。|1457114|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Data_URI_scheme^0|V|F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>For Firefox you don't need to create a filter.svg file, you can use <a href="http://en.wikipedia.org/wiki/Data_URI_scheme" rel="noreferrer">data URI scheme</a>.</p>

<p>Taking up the css code of the first answer gives:</p>

<pre class="lang-css prettyprint-override"><code>filter: url("data:image/svg+xml;utf8,&lt;svg%20xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter%20id='grayscale'&gt;&lt;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'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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+ */
</code></pre>

<p>Take care to replace "utf-8" string by your file encoding.</p>

<p>This method should be faster than the other because the browser will not need to do a second HTTP request.</p>


blocks|key|3787094|text|对于那些在其他答案中被忽略的IE10%2B支持的人，请查看这段CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3787095|img.grayscale:hover+{
++++filter:+url("data:image/svg%2Bxml;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;
}|code-block|syntax|javascript|3787096|应用于此标记：|3787097|<!DOCTYPE+HTML>
<html>
<head>

++++<title>Grayscaling+in+Internet+Explorer+10%2B</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>|3787098|有关更多演示，请查看IE+testdrive的CSS3+Graphics+section和这个旧的IE博客http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx|offset|length|3787099|entityMap|0|LINK|mutability|MUTABLE|url|http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm|1|http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx^0|0|0|0|0|N|L|0|1H|25|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]|$M|16|N|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>For people who are asking about the ignored IE10+ support in other answers, checkout this piece of CSS:</p>

<pre class="lang-css prettyprint-override"><code>img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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;
}
</code></pre>

<p>Applied on this markup:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;

    &lt;title&gt;Grayscaling in Internet Explorer 10+&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;

    &lt;p&gt;IE10 with inline SVG&lt;/p&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377"&gt;
      &lt;defs&gt;
         &lt;filter id="filtersPicture"&gt;
           &lt;feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /&gt;
           &lt;feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" /&gt;
        &lt;/filter&gt;
      &lt;/defs&gt;
      &lt;image filter="url(&amp;quot;#filtersPicture&amp;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" /&gt;
    &lt;/svg&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>For more demos, checkout IE testdrive's <a href="http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm" rel="nofollow">CSS3 Graphics section</a> and this old IE blog <a href="http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx" rel="nofollow">http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx</a></p>


blocks|key|5204987|text|作为旧浏览器的替代方案，be+可以使用由伪元素或行内标签生成的掩码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5204988|将绝对位置悬停在img+(或不需要单击或选择的文本区域)上可以通过rgba()或半透明png近似模拟颜色比例的效果。|5204989|它不会给出一个单一的色标，但会将颜色着色到超出范围。|5204990|通过伪元素在代码笔上测试10种不同的颜色，最后是灰色。http://codepen.io/gcyrillus/pen/nqpDd+(重新加载以切换到另一个镜像)|5204991|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/gcyrillus/pen/nqpDd^0|F|J|0|0|1M|0|0|Q|0|0|28|R|11|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|L|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]]]

<p>be <strong>An alternative for older browser</strong> could be to use mask produced by pseudo-elements or inline tags.  </p>

<p>Absolute positionning hover an  img (or text area wich needs no click nor selection) can closely mimic effects of color scale , <em>via rgba() or translucide png</em> .</p>

<p>It will not give one single color scale, but will shades color out of range.</p>

<p>test on code pen with 10 different colors via pseudo-element, last is gray . <a href="http://codepen.io/gcyrillus/pen/nqpDd" rel="nofollow">http://codepen.io/gcyrillus/pen/nqpDd</a> (reload to switch to another image)</p>


blocks|key|3787136|text|基于robertc's+answer|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3787137|为了获得从彩色图像到灰度图像的正确的转换，而不是像这样使用矩阵：|3787138|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|code-block|syntax|javascript|3787139|您应该像这样使用转换矩阵：|3787140|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|3787141|这对于基于RGBA+(红-绿-蓝-阿尔法)模型的所有类型的图像都应该工作得很好。|3787142|更多关于为什么你应该使用matrix的信息，我发布了robertc的one+check链接：|3787143|3787144|The+luminance+and+colour+difference+signals|unordered-list-item|3787145|Margus's+answer+for+question:+"greyscalevalue+in+colorvalue"+@stackoverflow+part:+|3787146|Charles+A.+Bouman+-+Purdue+university+-+Analog+TV+page+20+&+21|3787147|And+here+you+can+find+some+C#+and+VB+codes|3787148|3787149|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/4028908/1784053|1|https://intranet.rave.ac.uk/download/attachments/9116/The%2BY,%2BU%2Band%2BV%2Bsignals.pdf?version=1&modificationDate=1180887337667|2|https://stackoverflow.com/a/5410393/1784053|3|https://engineering.purdue.edu/%257Ebouman/ece637/notes/guestlecture/Torres/Analog_TV.pdf|4|https://web.archive.org/web/20141230145627/http://bobpowell.net/grayscale.aspx^0|2|G|0|0|0|0|0|0|0|0|0|0|17|1|0|0|2A|2|0|0|1Q|3|0|0|16|4|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|D|3|E|5|6|7|1N|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1O|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1P|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1Q|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1R|8|@]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1S|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1T|8|@]|9|@]|C|$]]|$1|T|3|U|5|V|7|1U|8|@]|9|@$A|1V|B|1W|1|1X]]|C|$]]|$1|W|3|X|5|V|7|1Y|8|@]|9|@$A|1Z|B|20|1|21]]|C|$]]|$1|Y|3|Z|5|V|7|22|8|@]|9|@$A|23|B|24|1|25]]|C|$]]|$1|10|3|11|5|V|7|26|8|@]|9|@$A|27|B|28|1|29]]|C|$]]|$1|12|3|-4|5|6|7|2A|8|@]|9|@]|C|$]]|$1|13|3|-4|5|6|7|2B|8|@]|9|@]|C|$]]]|14|$15|$5|16|17|18|C|$19|1A]]|1B|$5|16|17|18|C|$19|1C]]|1D|$5|16|17|18|C|$19|1E]]|1F|$5|16|17|18|C|$19|1G]]|1H|$5|16|17|18|C|$19|1I]]]]

<p>Based on <a href="https://stackoverflow.com/a/4028908/1784053">robertc's answer</a>:</p>
<p>To get <strong>proper</strong> conversion from colored image to grayscale image instead of using matrix like this:</p>
<pre><code>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
</code></pre>
<p>You should use conversion matrix like this:</p>
<pre><code>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
</code></pre>
<p>This should work fine for all the types of images based on RGBA (red-green-blue-alpha) model.</p>
<p>For more information why you should use matrix I posted more likely that the robertc's one check following links:</p>
<ul>
<li><a href="https://intranet.rave.ac.uk/download/attachments/9116/The+Y,+U+and+V+signals.pdf?version=1&amp;modificationDate=1180887337667" rel="nofollow noreferrer">The luminance and colour difference signals</a></li>
<li><a href="https://stackoverflow.com/a/5410393/1784053">Margus's answer for question: &quot;greyscalevalue in colorvalue&quot; @stackoverflow part: <strong>Edit 2: @Hans Passant</strong></a></li>
<li><a href="https://engineering.purdue.edu/%7Ebouman/ece637/notes/guestlecture/Torres/Analog_TV.pdf" rel="nofollow noreferrer">Charles A. Bouman - Purdue university - Analog TV page 20 &amp; 21</a></li>
<li><a href="https://web.archive.org/web/20141230145627/http://bobpowell.net/grayscale.aspx" rel="nofollow noreferrer">And here you can find some C# and VB codes</a></li>
</ul>


blocks|key|1675973|text|您可以使用jFunc的一个函数-使用函数"jFunc_CanvasFilterGrayscale“http://jfunc.com/jFunc-functions.aspx|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1675974|entityMap|0|LINK|mutability|MUTABLE|url|http://jfunc.com/jFunc-functions.aspx^0|1D|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can use one of the functions of jFunc - use the function "jFunc_CanvasFilterGrayscale"
<a href="http://jfunc.com/jFunc-functions.aspx" rel="nofollow">http://jfunc.com/jFunc-functions.aspx</a></p>


blocks|key|1676005|text|这是一个LESS的混入，可以让你选择任何不透明度。以不同的百分比填充纯CSS的变量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1676006|整洁的提示在这里，它使用饱和类型的矩阵，所以你不需要做任何花哨的事情来改变百分比。|1676007|.saturate(@value:0)+{
++++@percent:+percentage(@value);

++++filter:+url("data:image/svg%2Bxml;utf8,<svg%2520xmlns='http://www.w3.org/2000/svg'><filter%2520id='grayscale'><feColorMatrix%2520type='saturate'%2520values='@value'/></filter></svg>#grayscale");+/*+Firefox+3.5%2B+*/
++++filter:+grayscale(@percent);+/*+Current+draft+standard+*/
++++-webkit-filter:+grayscale(@percent);+/*+New+WebKit+*/
++++-moz-filter:+grayscale(@percent);
++++-ms-filter:+grayscale(@percent);
++++-o-filter:+grayscale(@percent);
}|code-block|syntax|javascript|1676008|然后使用它：|1676009|img.desaturate+{
++++transition:+all+0.2s+linear;
++++.saturate(0);
++++&:hover+{
++++++++.saturate(1);
++++}
}|1676010|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Here's a mixin for LESS that will let you choose any opacity. Fill in the variables yourself for plain CSS at different percentages.</p>

<p><strong>Neat hint here</strong>, it uses the saturate type for the matrix so you don't need to do anything fancy to change the percentage.</p>

<pre><code>.saturate(@value:0) {
    @percent: percentage(@value);

    filter: url("data:image/svg+xml;utf8,&lt;svg%20xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter%20id='grayscale'&gt;&lt;feColorMatrix%20type='saturate'%20values='@value'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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);
}
</code></pre>

<p>Then use it:</p>

<pre><code>img.desaturate {
    transition: all 0.2s linear;
    .saturate(0);
    &amp;:hover {
        .saturate(1);
    }
}
</code></pre>


blocks|key|5205058|text|试试这个jquery插件。虽然，这不是一个纯粹的HTML和CSS解决方案，但它是一个懒惰的方式来实现您想要的。您可以自定义您的灰度最适合您的使用。使用方法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5205059|$("#myImageID").tancolor();|code-block|syntax|javascript|5205060|有一个交互式的demo。你可以玩玩它。|offset|length|5205061|查看有关使用的文档，它非常简单。docs|5205062|entityMap|0|LINK|mutability|MUTABLE|url|http://nicolaisi.github.io/tancolor/|1|https://github.com/nicolaisi/tancolor^0|0|0|7|4|0|0|G|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

<p>Try this jquery plugin. Although, this is not a pure HTML and CSS solution, but it is a lazy way to achieve what you want. You can customize your greyscale to best suit your usage. Use it as follow:</p>

<pre><code>$("#myImageID").tancolor();
</code></pre>

<p>There's an interactive <a href="http://nicolaisi.github.io/tancolor/" rel="nofollow">demo</a>. You can play around with it.</p>

<p>Check out the documentation on the usage, it is pretty simple. <a href="https://github.com/nicolaisi/tancolor" rel="nofollow">docs</a></p>


blocks|key|1676028|text|作为对其他人答案的补充，可以在FF上将图像去饱和化一半，而不会遇到SVG矩阵的麻烦：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1676029|<feColorMatrix+type="saturate"+values="$v"+/>|code-block|syntax|javascript|1676030|其中$v位于0和1之间。它等同于filter:grayscale(50%25);。|offset|length|style|CODE|1676031|现场示例：|1676032|​|1676033|.desaturate+{
++++filter:+url("#desaturate");
++++-webkit-filter:+grayscale(50%25);
}
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%25;
++++font-family:+"Helvetica";
}|1676034|<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>|1676035|1676036|Reference+on+MDN|1676037|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/fr/docs/Web/SVG/Element/feColorMatrix^0|0|0|2|2|6|1|8|1|G|M|0|0|0|0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|17|8|@$I|18|J|19|K|L]|$I|1A|J|1B|K|L]|$I|1C|J|1D|K|L]|$I|1E|J|1F|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|U|3|P|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1L|8|@]|9|@$I|1M|J|1N|1|1O]]|A|$]]|$1|X|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

<p>As a complement to other's answers, it's possible to desaturate an image half the way on FF without SVG's <em>matrix's</em> headaches:</p>

<pre><code>&lt;feColorMatrix type="saturate" values="$v" /&gt;
</code></pre>

<p>Where <code>$v</code> is between <code>0</code> and <code>1</code>. It's equivalent to <code>filter:grayscale(50%);</code>.</p>

<p>Live example:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;filter id="desaturate"&gt;
  	&lt;feColorMatrix type="saturate" values="0.4"/&gt;
  &lt;/filter&gt;
&lt;/svg&gt;

&lt;figure&gt;
  &lt;figcaption&gt;Original&lt;/figcaption&gt;
  &lt;img src="http://www.placecage.com/c/500/200"/&gt;
  &lt;/figure&gt;
&lt;figure&gt;
  &lt;figcaption&gt;Half grayed&lt;/figcaption&gt;
  &lt;img class="desaturate" src="http://www.placecage.com/c/500/200"/&gt;
&lt;/figure&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://developer.mozilla.org/fr/docs/Web/SVG/Element/feColorMatrix" rel="nofollow noreferrer">Reference on MDN</a></p>


blocks|key|5205081|text|对于在火狐中以百分比表示的灰度，请改用saturate+filter：(搜索'saturate')|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5205082|filter:+url("data:image/svg%2Bxml;utf8,<svg+xmlns='http://www.w3.org/2000/svg'><filter+id='saturate'><feColorMatrix+in='SourceGraphic'+type='saturate'+values='0.2'+/></filter></svg>#saturate"|code-block|syntax|javascript|5205083|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix^0|J|F|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>For grayscale as a percent in Firefox, use <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix" rel="nofollow">saturate filter</a> instead: (search for 'saturate')</p>

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


blocks|key|5205100|text|你不需要使用这么多的前缀来充分利用，因为如果你为旧的firefox选择了prefix，你就不需要为新的firefox使用前缀。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5205101|因此，要想充分发挥作用，请使用以下代码：|5205102|img.grayscale+{
++++filter:+url("data:image/svg%2Bxml;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%2B,+Firefox+on+Android+*/
++++filter:+gray;+/*+IE6-9+*/
++++-webkit-filter:+grayscale(100%25);+/*+Chrome+19%2B,+Safari+6%2B,+Safari+6%2B+iOS+*/
}

img.grayscale.disabled+{
++++filter:+url("data:image/svg%2Bxml;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%25);
}|code-block|syntax|javascript|5205103|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You don't need use so many prefixes for full use, because if you choose prefix for old firefox, you don't need use prefix for new firefox.</p>

<p>So for full use, enough use this code:</p>

<pre><code>img.grayscale {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");
    filter: none;
    -webkit-filter: grayscale(0%);
}
</code></pre>


blocks|key|1457422|text|一种新的方法已经在现代浏览器上出现了一段时间了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1457423|background-blend-mode允许你得到一些有趣的效果，其中之一就是灰度转换|offset|length|style|BOLD|1457424|在白色背景上设置的明度值允许这样做。(将鼠标悬停以灰色显示)|1457425|​|1457426|.test+{
++width:+300px;
++height:+200px;
++++background:+url("http://placekitten.com/1000/750"),+white;+
++++background-size:+cover;
}

.test:hover+{
++++background-blend-mode:+luminosity;
}|code-block|syntax|javascript|1457427|<div+class="test"></div>|1457428|1457429|亮度取自图像，颜色取自背景。因为它总是白色的，所以没有颜色。|1457430|但它允许更多。|1457431|您可以设置动画效果设置3层。第一个是图像，第二个是白黑渐变。如果你在上面应用一个叠加混合模式，你将在白色部分得到一个白色的结果，但是在黑色部分得到一个原始图像(乘以白色得到白色，乘以黑色没有效果)。|1457432|在渐变的白色部分，你会得到和以前一样的效果。在渐变的黑色部分，将图像混合在自身上，结果是未经修改的图像。|1457433|现在，所有需要做的就是移动渐变来获得动态效果：(悬停以查看颜色)|1457434|1457435|div+{
++++width:+600px;
++++height:+400px;
}

.test+{
++++background:+url("http://placekitten.com/1000/750"),+
linear-gradient(0deg,+white+33%25,+black+66%25),+url("http://placekitten.com/1000/750");+
++++background-position:+0px+0px,+0px+0%25,+0px+0px;
++++background-size:+cover,+100%25+300%25,+cover;
++++background-blend-mode:+luminosity,+multiply;
++++transition:+all+2s;
}

.test:hover+{
++++background-position:+0px+0px,+0px+66%25,+0px+0px;
}|1457436|<div+class="test"></div>|1457437|1457438|reference|1457439|compatibility+matrix|1457440|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/compositing-1/|1|http://caniuse.com/#feat=css-backgroundblendmode^0|0|0|L|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|9|0|0|0|K|1|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1O|8|@$D|1P|E|1Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1S|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1T|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|N|7|1U|8|@]|9|@]|A|$O|P]]|$1|S|3|K|5|6|7|1V|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1W|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1X|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|20|8|@]|9|@]|A|$]]|$1|13|3|K|5|6|7|21|8|@]|9|@]|A|$]]|$1|14|3|15|5|N|7|22|8|@]|9|@]|A|$O|P]]|$1|16|3|17|5|N|7|23|8|@]|9|@]|A|$O|P]]|$1|18|3|K|5|6|7|24|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|25|8|@]|9|@$D|26|E|27|1|28]]|A|$]]|$1|1B|3|1C|5|6|7|29|8|@]|9|@$D|2A|E|2B|1|2C]]|A|$]]|$1|1D|3|-4|5|6|7|2D|8|@]|9|@]|A|$]]]|1E|$1F|$5|1G|1H|1I|A|$1J|1K]]|1L|$5|1G|1H|1I|A|$1J|1M]]]]

<p>A new way to do this has been available for some time now on modern browsers.</p>

<p><strong>background-blend-mode</strong> allows you to get some interesting effects, and one of them is grayscale conversion</p>

<p>The value <em>luminosity</em> , set on a white background, allows it.
(hover to see it in gray)</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.test {
  width: 300px;
  height: 200px;
    background: url("http://placekitten.com/1000/750"), white; 
    background-size: cover;
}

.test:hover {
    background-blend-mode: luminosity;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The luminosity is taken from the image, the color is taken from the background. Since it is always white, there is no color.</p>

<p>But it allows much more.</p>

<p>You can animate the effect setting 3 layers. The first one will be the image, and the second will be a white-black gradient. If you apply a multiply blend mode on this, you will get a white result as before on the white part, but the original image on the black part (multiply by white gives white, multiplying by black has no effect.)</p>

<p>On the white part of the gradient, you get the same effect as before. On the black part of the gradient, you are blending the image over itself, and the result is the unmodified image.</p>

<p>Now, all that is needed is to move the gradient to get this effect dynamic: (hover to see it in color)</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://www.w3.org/TR/compositing-1/" rel="noreferrer">reference</a></p>

<p><a href="http://caniuse.com/#feat=css-backgroundblendmode" rel="noreferrer">compatibility matrix</a></p>


blocks|key|5205152|text|也许这样会对你有帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5205153|img+{
++++-webkit-filter:+grayscale(100%25);+/*+Chrome,+Safari,+Opera+*/
++++filter:+grayscale(100%25);
}|code-block|syntax|javascript|5205154|w3schools.org|offset|length|5205155|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/cssref/css3_pr_filter.asp^0|0|0|0|D|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Maybe this way help you</p>

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

<p><a href="http://www.w3schools.com/cssref/css3_pr_filter.asp" rel="nofollow">w3schools.org</a></p>


blocks|key|1461513|text|使用CSS实现灰度的最简单方法是通过filter属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1461514|img+{
++++-webkit-filter:+grayscale(100%25);+/*+Safari+6.0+-+9.0+*/
++++filter:+grayscale(100%25);
}|code-block|syntax|javascript|1461515|该属性仍然不完全受支持，并且仍然需要-webkit-filter属性才能跨所有浏览器提供支持。|1461516|entityMap^0|I|6|0|0|I|E|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Simplest way to achieve grayscale with CSS exclusively is via the <code>filter</code> property.</p>

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

<p>The property is still not fully supported and still requires the <code>-webkit-filter</code> property for support across all browsers.</p>


<p>Is there a simple way to display a color bitmap in grayscale with just <code>HTML/CSS</code>?</p>

<p>It doesn't need to be IE-compatible (and I imagine it won't be) -- if it works in FF3 and/or Sf3, that's good enough for me.</p>

<p>I know I can do it with both <code>SVG</code> and Canvas, but that seems like a lot of work right now.  </p>

<p>Is there a truly lazy person's way to do this?</p>


Convert an image to grayscale in HTML/CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有没有一种仅用HTML/CSS就能以灰度显示彩色位图的简单方法它不需要与IE兼容(我想也不需要) --如果它能在FF3和/或Sf3中工作，对我来说就足够了。我知道我可以用SVG和Canvas来做这件事，但现在似乎有很多工作要做。有没有一个真正懒惰的人可以做到这一点？

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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