使用CSS灰显图像？

使用CSS3过滤器属性:

img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

浏览器支持有点不好,但它是100%的CSS.有关CSS3过滤器属性的精彩文章,请访问:http://blog.nmsdvid.com/css-filter-property/

你在这里:

Css Gray:

img{
    filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray:

a:hover img{
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

我发现在:http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

编辑: IE10 +不支持IE9及更早版本的DX过滤器,也不支持灰度过滤器的前缀版本.您可以修复它,使用以下两种解决方案中的一种:

使用IE9标准模式将IE10 +设置为使用头部中的以下元素元素进行渲染:

在IE10中使用SVG覆盖来完成灰度级Internet Explorer 10 - 如何应用灰度过滤器？

如果您不介意使用一些JavaScript,jQuery的fadeTo()可以很好地适用于我尝试过的每个浏览器.

jQuery(selector).fadeTo(speed, opacity);

更好地支持所有浏览器:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}