CSS 實現圖片灰度效果

非原創-從網上收索出來的文章

CSS實現圖片灰度效果就是通過CSS樣式讓彩色圖片呈現為灰色，相當於把一張圖像的顏色模式調整為灰度，CSS可以通過以下幾種方法來實現灰度效果。

方式1. IE濾鏡

img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //標准寫法
img { filter:Gray; } //簡寫

IE系列瀏覽器都支持IE濾鏡的這一屬性，非IE瀏覽器不支持。

方式2. CSS3濾鏡

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

CSS3濾鏡目前還不屬於標准屬性，現在暫時只有Google Chrome瀏覽器支持，其他瀏覽器均不支持

CSS實現灰度效果可以讓網頁更加容易實現一些特效，還記得紀念5.12大地震國內很多網頁在一夜之間全部變成灰色嗎？給網站加上下面的樣式就可以輕松實現：

1html { filter:Gray; -webkit-filter: grayscale(100%); }

有人肯定要說了CSS實現灰度效果雖好，但不能做到兼容全部瀏覽器呀，怎么辦呢？CSS做不到的事情，大家肯定會想到用JS來實現，下面給大家推薦一款JS灰度效果插件：

grayscale.js

使用方法：

//引入插件
<script type="text/javascript" src="grayscale.js"></script>
 
//調用插件
<script type="text/javascript">
    window.onload = function(){
        var el = document.getElementById( 'body' );
        grayscale( el );
    };
</script>

兼容所有瀏覽器，執行后會在元素上加入很多行內樣式，如果你對兼容性要求不高的話建議使用CSS實現灰度效果。