目前,搜索引擎上的代碼都比較老了,加過會出現(xiàn)不起作用,因?yàn)楹芏嗍褂昧薱ss3的渲染. 用下面代碼可以解決一切問題
在head之間,未引用css文件之前加入
<style>
html{
-webkit-filter: grayscale(); /* Chrome, Safari, Opera */
-ms-filter: grayscale();
-moz-filter: grayscale();
filter: gray; /* IE 6-9 */
}
</style>
網(wǎng)頁瞬間變黑色了
關(guān)于grayscale濾鏡
其中g(shù)rayscale（）的取值為0%-，也可以用0-1取代，0%代表彩色圖像，代表完全的灰度。
css filter的瀏覽器兼容情況如下，Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+,Blackberry 10+均支持了-webkit-filter的方式，IE不支持，firefox不支持。
接到需求，開始是想改樣式和圖片，但是想著512當(dāng)時(shí)那么多網(wǎng)站都改變過，一定有簡便一點(diǎn)的方法，到網(wǎng)上看了幾篇帖子，大多都是改樣式的，只有一個(gè)是用js實(shí)現(xiàn)的，而且可以實(shí)現(xiàn)全局效果（大快我心），兼容性也很好（在Opera 9，F(xiàn)F2 / 3，Safari 4，IE6 / 7中成功測試）測試后只是加載效率低了點(diǎn)，其他沒別的問題。這就是grayscale.js，通過修改網(wǎng)站背景、動(dòng)態(tài)改變圖片（這也是問什么它效率低的原因）生成黑白網(wǎng)站效果。小型網(wǎng)站展示為主的可以用它，多圖或?qū)虞d時(shí)間敏感的網(wǎng)站不推薦這種方法（老實(shí)寫樣式吧）。使用grayscale.js的方法很簡單：
引入js文件
<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
選擇器選擇要改變的地方
//選擇器可選任何元素、任何你想改變的塊或這個(gè)頁面
//原生js
grayscale(document.getElementById("gray"));
//或用jq
grayscale($("body"));
