CSS 實現圖片灰階效果 相容於各種瀏覽器

本章為大家介紹用css 實現圖片灰階效果的方法， 相容於各種瀏覽器如360瀏覽器。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

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大地震國內很多網頁在一夜之間全部變成灰色嗎？為網站加上下面的樣式就可以輕鬆實現： 

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

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

grayscale.js strong>

使用方法：

//引入插件
<script type="text/javascript" src="grayscale.js"></script>

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

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