一行代碼實(shí)現(xiàn)頁(yè)面全屏黑白

1、實(shí)現(xiàn)頁(yè)面全屏黑白的示例

百度

今日頭條

阿里

騰訊

從上面的實(shí)現(xiàn)方式可以看到，關(guān)鍵技術(shù)是利用了 CSS 的 filter 技術(shù)，也就是 CSS 的濾鏡功能。

2、CSS中的filter

我們看看 MDN 關(guān)于 filter 的描述：

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects. You can also reference an SVG filter with a URL to an SVG filter element.

大意是可以使用 filter 給 HTML 元素添加一些效果，比如模糊、顏色偏移，通常可用于調(diào)整圖像，背景和邊框的渲染效果。CSS 標(biāo)準(zhǔn)里包含了一些預(yù)定義效果的函數(shù)，你也可以通過(guò)一個(gè)URL 使用 SVG 濾鏡元素(SVG filter element)。

2.1、grayscale() 函數(shù)（修改圖像灰度）

實(shí)現(xiàn)頁(yè)面黑白主要用到 filter 中的 grayscale 預(yù)定義函數(shù)。grayscale 函數(shù)是 CSS 預(yù)定義的函數(shù)，主要作用是將圖像轉(zhuǎn)換為灰度圖像，通過(guò)具體的值定義轉(zhuǎn)換的比例。若值為 100% 則完全轉(zhuǎn)為灰度圖像，值為 0% 圖像無(wú)變化。

2.2、其他預(yù)定義函數(shù)

2.2.1、blur()（設(shè)置模糊度）

2.2.2、contrast()（設(shè)置顏色對(duì)比度）

contrast() 函數(shù)可調(diào)整輸入圖像的對(duì)比度。值是 0% 的話，圖像會(huì)全黑。值是 100%，圖像不變。值可以超過(guò) 100%，意味著會(huì)運(yùn)用更低的對(duì)比。若沒(méi)有設(shè)置值，默認(rèn)是 1。

2.2.3、hue-rotate()（設(shè)置色相旋轉(zhuǎn)）

設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為 0deg，則圖像無(wú)變化。若值未設(shè)置值，默認(rèn)為 0deg。該值雖然沒(méi)有最大值，超過(guò) 360deg 的值相當(dāng)于又繞一圈。

2.2.4、drop-shadow()（設(shè)置陰影效果）

2.3、屬性的瀏覽器兼容性

2.3.1、如何兼容IE

從上圖可以看到，filter 屬性實(shí)際上是不支持 IE 瀏覽器的。

IE7-9 瀏覽器要想實(shí)現(xiàn)黑白頁(yè)面，可以使用 css 自帶的濾鏡，如下：

body {
   filter: gray;   /* 兼容IE7、IE8、IE9 。且必須得加到body元素上，加到html元素上不起作用。直接body可能部分元素沒(méi)有生效的話，可以改成 body * {} */            
}

但以上屬性并不兼容 IE10、IE11，可以通過(guò)使用 grayscale.js 來(lái)兼容IE10、IE11。如下：

<script src="./grayscale.js"></script>
<script>
    // IE10-11用grayscale.js處理
    var navStr = navigator.userAgent.toLowerCase();
    if (navStr.indexOf("msie 10.0") !== -1 || navStr.indexOf("rv:11.0") !== -1) { // 判斷是IE10或者IE11
        grayscale(document.body);
    }
</script>

grayscale.js 是一個(gè)實(shí)現(xiàn)網(wǎng)頁(yè)元素 “灰度” 效果的js插件，可以運(yùn)行在大多數(shù)的瀏覽器中。

grayscale.js 下載地址：https://www.skyfinder.cc/2018/12/05/grayscalejs/

（查看grayscale.js的實(shí)際效果，可以看到，實(shí)際上它就是循環(huán)元素，將元素的顏色相關(guān)屬性比如背景色、邊框、字體等屬性修改為灰色，圖片的話是改成了base64編碼，通過(guò)base64編碼來(lái)將圖片改成灰色。所以會(huì)出現(xiàn)一個(gè)問(wèn)題，該插件對(duì)圖片進(jìn)行修改太耗時(shí)，導(dǎo)致頁(yè)面看起來(lái)會(huì)很卡，此時(shí)提供一個(gè)方法：修改grayscale.js的源碼，跳過(guò)圖片的處理，然后如果需要展示黑白，前端再通過(guò)替換黑白圖片的方式來(lái)實(shí)現(xiàn)圖片黑白）

3、一個(gè)幾乎兼容所有瀏覽器的寫法

最后提供一個(gè)幾乎兼容所有瀏覽器的寫法，如下：

<style>
    html {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);    /*基于WebKit 內(nèi)核的瀏覽器，谷歌, Safari, 新版Opera瀏覽器。。。*/
        -moz-filter: grayscale(100%);       /*火狐*/
        -ms-filter: grayscale(100%);        /*IE瀏覽器 和 Edge瀏覽器*/
        -o-filter: grayscale(100%);         /*舊版Opera瀏覽器*/
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

    body {
        filter: gray;   /* 兼容IE7、IE8、IE9 。且必須得加到body元素上，加到html元素上不起作用。選擇器直接寫body如果部分元素沒(méi)有生效的話，可以寫成body *{} */            
    }
</style>


<script src="./grayscale.js"></script>
<script>
    // IE10-11用grayscale.js處理
    var navStr = navigator.userAgent.toLowerCase();
    if (navStr.indexOf("msie 10.0") !== -1 || navStr.indexOf("rv:11.0") !== -1) { // 判斷是IE10或者IE11
        grayscale(document.body);
    }
</script>

（

關(guān)于對(duì)于 icon 的兼容，以上修改頁(yè)面黑白的代碼，在Chrome瀏覽器中對(duì)于 icon 是一直有效的。在 IE 瀏覽器中，由于 IE9 以下（不包含IE9）不支持 icon，所以就無(wú)所謂了；在IE9中，對(duì)于 icon 也是一直有效的；

但是在IE10、IE11中，對(duì)于有色圖標(biāo)，grayscale.js 插件對(duì) symbol 方式的圖標(biāo)（即 svg）不生效，對(duì)于unicode 和 font class 的圖標(biāo)就生效（通過(guò) color 可修改有色圖標(biāo)進(jìn)行演示），所以建議大家最好使用 unicode 和 font class 的圖標(biāo)

）

參考鏈接：