目前,搜索引擎上的代碼都比較老了,加過會出現(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不支持。
接到需求,開始是想改樣式和圖片,但是想著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"));
