css–filter(濾鏡) 屬性
前言
前段時間找工作面試官問到一個問題，你如何將一個網頁整體置灰？面試遇到這樣的問題，一下束手無策，之前沒有接觸過這樣的需求，因此沒有回答上來，面試結束我才知道了這是考查對 CSS3 的新屬性的了解。這裡需要掌握 filter(濾鏡) 這個新屬性。細想一下，這個需求成立啊，比如遇到清明節、全國哀悼日、大地震等災害的日子，我們的網頁可以全局置灰，相當於加一層濾鏡，以表示我們對逝者的悼念。
正文
1.定義和使用
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。本文用Google瀏覽器測試，暫不烤爐兼容問題。
語法：
filter: none | blur() | brightness() | contrast() | drop–shadow() | grayscale() | hue–rotate() | invert() | opacity() | saturate() | sepia() | url();
注意：可以使用空格分割加多個濾鏡。
默認值：none；不加任何效果。
2.filter函數使用
基礎程式碼如下：
<div> <img src="./圖片/2222.jpeg" alt=""> <img src="./圖片/2222.jpeg" alt=""> <img src="./圖片/2222.jpeg" alt=""> <img src="./圖片/2222.jpeg" alt=""> </div> <style> div{ display: flex; justify-content: space-around; width: 500px; margin: 100px auto; } img{ width: 100px; } </style>
基礎效果如下：
（1）blur()，該函數給影像設置模糊度，默認值為0，可以設置長度值，但是不能設置百分比。
img:nth-child(1) {} img:nth-child(2) { filter: blur(2px); } img:nth-child(3) { filter: blur(4px); } img:nth-child(4) { filter: blur(6px); }
（2）brightness()，圖片高亮顯示，使得圖片看起來更亮或者更暗，參數為0%，圖片會全黑；參數為100%，圖片無變化；參數越大，圖片越亮；默認值為100%。通常為75%達到濾鏡效果，同時也可以用小數作為參數（如0.75）。
img:nth-child(1) {} img:nth-child(2) { filter: brightness(0%) } img:nth-child(3) { filter: brightness(75%) } img:nth-child(4) { filter: brightness(125%) }
（3）contrast()，調整影像對比圖，參數為0%，影像全黑；參數為100%，影像不變；參數越大，表示對比越低；默認值為100%。
img:nth-child(1) {} img:nth-child(2) { filter: contrast(0%) } img:nth-child(3) { filter: contrast(75%) } img:nth-child(4) { filter: contrast(125%) }
（4）drop-shadow(h-shadow v-shadow blur spread color) ，給影像設置一個陰影效果，陰影是合成在影像下面，可以又模糊度的，可以以特定的顏色色畫出遮罩圖的偏移版本，該函數與box-shadow屬性相似，不同之處在於，通過濾鏡，一些瀏覽器為了更好的性能會提供硬體加速。具體參數設置如下：
h-shadow和v-shadow，兩個參數是必選的，表示陰影偏移量，分別在水平方向和垂直方向的便宜距離，同樣設置負值的時候會出現相反的方向。
blur，該參數可選，表示模糊程度，值越大越模糊，則陰影會變大更大更淡，不允許負值，默認是為0表示陰影的邊界很銳利。
spread，該參數可選，正值會使陰影擴張和變大，負值會使陰影縮小，默認值為0表示陰影與元素一樣大小。
color，該參數可選，表示陰影的顏色，若未設定，顏色基於瀏覽器。
img:nth-child(1) {} img:nth-child(2) { filter: drop-shadow(20px 10px 4px #4444dd); } img:nth-child(3) { filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210)); } img:nth-child(4) { filter: drop-shadow(0 0 0.75rem crimson); }
（5）grayscale()，將影像轉為灰度影像，值定義轉換的比例，值為1–%表示全部轉換為灰度，值為0表示影像無變化。
img:nth-child(1) {} img:nth-child(2) { filter: grayscale(30%); } img:nth-child(3) { filter: grayscale(60%); } img:nth-child(4) { filter: grayscale(100%); }
（6）hue-rotate()，該函數給影像添加色相旋轉，參數為角度值deg，值為0deg，表示影像無變化；360deg表示影像色相旋轉一圈；超過360deg相當於又繞一圈；默認值為0deg。
img:nth-child(1) {} img:nth-child(2) { filter: hue-rotate(90deg); } img:nth-child(3) { filter: hue-rotate(180deg); } img:nth-child(4) { filter: hue-rotate(450deg); }
（7）invert()，該函數反轉輸入影像，參數值定義轉換比例，參數為100%表示完全反轉；參數為0%表示無變化，值在0%-100%之間。默認值為0%。
img:nth-child(1) {} img:nth-child(2) { filter: invert(30%); } img:nth-child(3) { filter: invert(60%); } img:nth-child(4) { filter: invert(100%); }
（8）opacity()，該函數轉化影像的透明度，值定義轉化比例。值為0%表示影像完全透明；值為100%表示影像無變化；值在0%-100%之間。默認值為100%。
img:nth-child(1) {} img:nth-child(2) { filter: opacity(30%); } img:nth-child(3) { filter: opacity(60%); } img:nth-child(4) { filter: opacity(100%); }
（9）saturate()，該函數設置影像飽和度，值定義轉化比例，值為0%則是完全不飽和，值為100%表示影像無變化；值在0%-100%之間。默認值為100%。
img:nth-child(1) {} img:nth-child(2) { filter: saturate(0%); } img:nth-child(3) { filter: saturate(30%); } img:nth-child(4) { filter: saturate(60%); }
（10）sepia()，該函數將影像轉化為深褐色，之定義轉化比例，值為100%表示完全深褐色，值為0%表示影像無變化；值在0%-100%之間。默認值為0%。
img:nth-child(1) {} img:nth-child(2) { filter: sepia(30%); } img:nth-child(3) { filter: sepia(60%); } img:nth-child(4) { filter: sepia(100%); }
寫在最後
有了上面的知識儲備，實現面試官這個需求就不難了，一行程式碼解決 filter: grayscale(1)；比如在某寶首頁中就可以有如下的效果對比了
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。
