前言：

? ? ? ? 臨近下班，接到上級通知，為了緬懷今日逝世的英雄；需要對網站進行微調整—— 整個頁面呈現出黑白效果

實現：

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

?filter可以設置的屬性值有：

? ? ? ? - none:默認值、沒有效果

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

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

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

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

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

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

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

? ? ? ? -opacity(%):轉化元素的透明度，相當于opacity屬性

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

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

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

可以同時使用多個濾鏡，每個濾鏡用空格隔開

例：

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。