網站變成灰色的代碼


IE瀏覽器中用了濾鏡來解決

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

 

chrome下

-webkit-filter: grayscale(100%);

 

 

IE+火狐+chrome

html {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url(desaturate.svg#grayscale);
	filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
	-webkit-filter: grayscale(1);
}

 大面積的操作降低頁面性能是肯定的,這里分享這個也只是想跟大家說一下,最近我看到這個樣式,感覺太厲害了。在這個樣式代碼中,涉及到了一個文件,就是desaturate.svg,從文件擴展名中可以看到,利用到了SVG技術了,代碼如下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
<fecolormatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0  0  0  1 0"/>
 </filter>
 </svg>

只需要將這代碼保存為desaturate.svg,再通過url鏈接就可以了,十分簡單。在前面看到的demo頁面中是在body中增加了樣式,影響頁面中所有的元素,如果有需要的話,可以單獨設置一個公共庫中的類名來調用,如:  

.pic_gray {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url(desaturate.svg#grayscale);
	filter: gray;
	-webkit-filter: grayscale(1);
}

  

 

  

 

 

 完美兼容,或者直接在css里添加:

<style type="text/css">
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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);}
</style>

 

 

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: