CSS 使圖片變灰的實例

　　最近項目中遇到個問題，就是要使圖片變灰。我想了幾種解決方案。

　　1 一種是圖片之間的替換，也就是將正常的圖片再做成灰色的。這種方法應該是最穩定的了，

　　但是就要花費時間去做多余的那些圖片了。應該算是比較費事的那種，程序員嘛，都比較懶，

　　喜歡讓計算機干更多的事情。

　　2 于是又想到了第二種，就是用css來解決問題，上網一搜還真有。 將“filter：gray;”添加到圖片的樣式中就可以了。

　　這是應用了濾鏡的效果。

　　對于IE用戶這個問題是解決了，但在firefox下就不起作用了。問題在于IE有濾鏡的支持，而firefox就沒有。

　　后來只能是在firefox下將圖片半透明顯示，也能起到滿意的效果。

　　"filter：gray; -moz-opacity:.1;opacity:0.1;"

　　這行代碼在IE下圖片變為灰色，在firefox下半透明顯示。

　　filter：gray 這個屬性只有IE支持，-moz-opacity這個屬性firefox低版本支持，opacity高版本支持

　　”filter: Alpha(opacity=10);-moz-opacity:.1;opacity:0.1;“

　　這行代碼在IE和firefox下都半透明顯示 。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈