目前,搜索引擎上的代碼都比較老了,加過會出現(xiàn)不起作用,因為很多使用了css3的渲染. 用下面代碼可以解決一切問題

在head之間,未引用css文件之前加入

<style>    

html{

   -webkit-filter: grayscale(); /* Chrome, Safari, Opera */

    -ms-filter: grayscale();

    -moz-filter: grayscale();

    filter: gray; /* IE 6-9 */

}    

</style>    

網(wǎng)頁瞬間變黑色了

關于grayscale濾鏡

其中grayscale（）的取值為0%-，也可以用0-1取代，0%代表彩色圖像，代表完全的灰度。
css filter的瀏覽器兼容情況如下，Chrome31+，Safari7+，Opera20+，ios Safari6+,Android Browser4.4+,Blackberry 10+均支持了-webkit-filter的方式，IE不支持，firefox不支持。

第二種方式使用grayscale.js

接到需求，開始是想改樣式和圖片，但是想著512當時那么多網(wǎng)站都改變過，一定有簡便一點的方法，到網(wǎng)上看了幾篇帖子，大多都是改樣式的，只有一個是用js實現(xiàn)的，而且可以實現(xiàn)全局效果（大快我心），兼容性也很好（在Opera 9，F(xiàn)F2 / 3，Safari 4，IE6 / 7中成功測試）測試后只是加載效率低了點，其他沒別的問題。這就是grayscale.js，通過修改網(wǎng)站背景、動態(tài)改變圖片（這也是問什么它效率低的原因）生成黑白網(wǎng)站效果。小型網(wǎng)站展示為主的可以用它，多圖或?qū)虞d時間敏感的網(wǎng)站不推薦這種方法（老實寫樣式吧）。使用grayscale.js的方法很簡單：

引入js文件

<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>

選擇器選擇要改變的地方

//選擇器可選任何元素、任何你想改變的塊或這個頁面

//原生js

grayscale(document.getElementById("gray"));

//或用jq

grayscale($("body"));

版權(quán)聲明：本站部分文章，由 鄭州路普科技整理發(fā)表(信息來自互聯(lián)網(wǎng),不代表本站觀點)，如有冒犯請聯(lián)系我們
網(wǎng)頁標簽：