本章為大家介紹用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實現灰度效果。
