首先,為雅安地震災區遇難同胞默哀!
今天有很多網站的首頁都變灰了,我們也找了很多變灰的方法,但是網上的大部分都不能夠實現現在瀏覽器的兼容問題。這里我們找到一個CSS和一個JS代碼,可以同時支持除IE10(我這邊測試不變會)以為其它瀏覽器,IE6、IE7、IE8、IE9、谷歌瀏覽器、Opera、獵豹瀏覽器、360瀏覽器、傲游瀏覽器等主流瀏覽器。
下面這段代碼支持IE6到IE9和谷歌內核瀏覽器:
html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-
filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8, filter: url("data:image/svg+xml;utf8, \'grayscale\'> \'grayscale\'> 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/> #grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:
grayscale(1);}
html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-
filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,\'grayscale\'>0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:
grayscale(1);}
另外Opera瀏覽器貌似不可以,就需要用到這段JS代碼:
直接復制就可以用的,這兩段代碼基本上兼容了現在大部分瀏覽器,比那些其它的被復制了N遍的老代碼好多了!效果展示:http://www.94897.com/