前言：

? ? ? ? 臨近下班，接到上級(jí)通知，為了緬懷今日逝世的英雄；需要對(duì)網(wǎng)站進(jìn)行微調(diào)整—— 整個(gè)頁面呈現(xiàn)出黑白效果

實(shí)現(xiàn)：

? ? ? ? css的filter（濾鏡）屬性??

?filter可以設(shè)置的屬性值有：

? ? ? ? - none:默認(rèn)值、沒有效果

? ? ? ? - blur(px):為元素設(shè)置模糊度，設(shè)置的值越高越模糊（不接受百分比值）

? ? ? ? - brightness(%):設(shè)置亮暗度，0%圖案全黑、100%圖像無變化、>100%圖像更亮

? ? ? ? - contrast(%):設(shè)置元素的灰白度，0%元素全灰、100%元素?zé)o變化、>100%元素更白

? ? ? ? -drop-shadow(h-shadow v-shadow blur spread color):設(shè)置陰影效果,類似box-shadow

? ? ? ? -grayscale(%):將元素轉(zhuǎn)換為灰白度圖像。取值范圍（0%-100%或0-1）

? ? ? ? -hue-rotate(deg)：

? ? ? ? -invert(%)：反轉(zhuǎn)輸入圖像

? ? ? ? -opacity(%):轉(zhuǎn)化元素的透明度，相當(dāng)于opacity屬性

? ? ? ? -saturate(%):轉(zhuǎn)換元素飽和度

? ? ? ? -sepia(%):將圖片轉(zhuǎn)化為深褐色

? ? ? ? -url()：URL函數(shù)接受一個(gè)XML文件，該文件設(shè)置了 一個(gè)SVG濾鏡，且可以包含一個(gè)錨點(diǎn)來指定一個(gè)具體的濾鏡元素

可以同時(shí)使用多個(gè)濾鏡，每個(gè)濾鏡用空格隔開

例：

img?{
????-webkit-filter:?contrast(200%) brightness(150%);??/* Chrome, Safari, Opera */
????filter:?contrast(200%) brightness(150%);
}

通過js修改屬性時(shí)：document.body.style.WebkitFilter="grayscale(100%)"

? ? ? ? ? ? ? ? ? ? ? ??

總結(jié)

以上是生活随笔為你收集整理的通过css实现页面黑白效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。