前言

最近閱讀了張?chǎng)涡窭蠋煹摹禖SS新世界》里面對(duì)一些css屬性的運(yùn)用很巧妙站超，屬實(shí)打開了新世界的大門荸恕，這篇文章主要總結(jié)一下filter屬性的運(yùn)用，里面的例子主要來自書本或參考文章死相，經(jīng)由自己一些改動(dòng)實(shí)現(xiàn)融求；

完整代碼可以關(guān)注公眾號(hào) 前端一塊磚， 公眾號(hào)后臺(tái)回復(fù)：filter算撮，獲取codepen地址

filter屬性

filter生宛，就是我們常說的濾鏡，可以通過改變相關(guān)參數(shù)使元素出現(xiàn)模糊或顏色偏移等圖形效果肮柜；

filter屬性總共支持10個(gè)濾鏡函數(shù)陷舅，我們來逐一介紹一下

blur

filter: blur(5px)

模糊，blur()函數(shù)支持任意長(zhǎng)度值审洞，但是不支持百分比值

blur()函數(shù)的參數(shù)值表示高斯函數(shù)的標(biāo)準(zhǔn)偏差值莱睁，可以理解為屏幕上互相融合的像素?cái)?shù)量。因此芒澜，blur()函數(shù)的參數(shù)值越大仰剿，圖像的模糊效果越明顯

我們常見的毛玻璃效果就可以通過該函數(shù)實(shí)現(xiàn)，不過更合適的屬性并不是filter 而是 backdrop-filter ; 它倆的語(yǔ)法幾乎一模一樣痴晦，區(qū)別在于 filter 是對(duì)當(dāng)前元素運(yùn)用濾鏡效果南吮，而 backdrop-filter 是讓當(dāng)前元素所在區(qū)域后面的內(nèi)容應(yīng)用濾鏡效果，為了看到效果誊酌，必須使元素或其背景至少部分透明部凑，見下例

背景圖源: https://picsum.photos/

<div class="container">
 <div class="drop-box">
   <p>backdrop-filter: blur(10px)</p>
 </div>
 <div class="filter-box">
   <p>filter: blur(1px)</p>
 </div>
</div>

/* ...other css */
.drop-box {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    text-align: center;
    backdrop-filter: blur(10px);
    padding: 20px 40px;
}
.filter-box {
    background-color: rgba(255, 255, 255, .7);
    border-radius: 5px;
    text-align: center;
    filter: blur(1px);
    padding: 20px 40px;
}

可以看到filter使得文字內(nèi)容也模糊了，而 backdrop-filter 符合我們的預(yù)期效果碧浊；但 backdrop-filter 目前在火狐上還有兼容性問題涂邀，下面這個(gè)例子??我們用filter來實(shí)現(xiàn)backdrop-filter的效果

背景圖源: https://wallhaven.cc/

為了避免文字內(nèi)容受到濾鏡模糊影響，我們可以將濾鏡設(shè)置在偽元素before上箱锐，動(dòng)畫效果和背景都通過偽元素實(shí)現(xiàn)

<ul class="cards">
 <li class="card">
   <h4 class="title">GenJi</h4>
   <p class="content">龍神の剣を喰え比勉！</p>
 </li>
 <li class="card">
   <h4 class="title">Ana Amari</h4>
   <p class="content">該睡覺咯.</p>
 </li>
 <li class="card">
   <h4 class="title">Torbj?rn</h4>
   <p class="content">他強(qiáng)任他強(qiáng)<br>我玩托比昂. </p>
 </li>
</ul>

/* ...other css */
.card {
    width: 220px;
    height: 300px;
    border-radius: 8px;
    padding: 0 24px;
    position: relative;
    cursor: pointer;
}
.card::before {
    z-index: -1;
    content: '';
    position: absolute;
    /* 邏輯屬性，相當(dāng)于 top: 0; right: 0; bottom: 0; left: 0; 的縮寫 */
    inset: 0;
    background-color: pink;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    filter: blur(0px) opacity(1);
    transition: .2s linear;
}

.card:nth-child(1)::before {
    background-image: url(https://th.wallhaven.cc/small/mp/mplmy1.jpg);
}
.card:nth-child(2)::before {
    background-image: url(https://th.wallhaven.cc/small/6q/6q228x.jpg);
}
.card:nth-child(3)::before {
    background-image: url(https://th.wallhaven.cc/small/gj/gj99ye.jpg);
}
/* 通過css選擇器選出非hover的.card元素 */
.cards:hover>.card:not(:hover)::before {
    /* 給其偽類同時(shí)添加模糊、透明度和明暗度的濾鏡 */
    filter: blur(5px) opacity(0.8) brightness(0.8);
}
/* 對(duì)于hover的元素敷搪，其偽類增強(qiáng)飽和度，尺寸放大 */
.card:hover::before {
    filter: saturate(1.2);
    transform: scale(1.05);
}

brightness

filter: brightness(2.4)

亮度幢哨，上面??的例子我們已經(jīng)用到過了赡勘，參數(shù)值支持?jǐn)?shù)值和百分比值，不傳參默認(rèn)取1捞镰，參數(shù)為0表示沒有亮度闸与，元素呈純黑色

brightness可以用來模擬電影謝幕效果，這里我們用hover觸發(fā)動(dòng)畫

背景圖源: https://wallhaven.cc/

<div class="container">
 <div class="text">
   <p>該睡覺咯.</p>
 </div>
</div>

.container::before {
    z-index: -1;
    content: '';
    inset: 0;
    position: absolute;
    background-image: url(https://w.wallhaven.cc/full/6q/wallhaven-6q228x.png), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
    background-size: cover;
}

/* 我們等背景圖加載完再手動(dòng)通過hover觸發(fā)動(dòng)畫 */
.container:hover::before {
    /* forwards表示當(dāng)動(dòng)畫完成后岸售，保持最后一幀的狀態(tài) */
    animation: fade-away 2.5s linear forwards;
}

.container:hover>.text {
    animation: show 2s cubic-bezier(.74, -0.1, .86, .83) forwards;
}

.text {
    line-height: 55px;
    color: #fff;
    font-size: 36px;
    text-align: center;
    opacity: 0;
}

/* 背景變暗動(dòng)畫 */
@keyframes fade-away {
    30% {
        filter: brightness(1);
    }
    100% {
        filter: brightness(0);
    }
}

/* 文字出現(xiàn)動(dòng)畫 */
@keyframes show {
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

drop-shadow

filter: drop-shadow(4px 4px 8px blue);
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

投影践樱，drop-shadow用來給元素設(shè)置符合真實(shí)世界陰影規(guī)則的投影效果;相比于box-shadow凸丸，它不支持陰影擴(kuò)展拷邢，不支持內(nèi)陰影瞭稼，不支持累加投影；但不同于box-shadow只會(huì)在盒子的四周留下陰影腻惠，它能使盒子中鏤空或透明的部分也出現(xiàn)陰影輪廓

<div class="container">
 <div class="item" style="border-bottom-color: pink; transform: rotateZ(0);"></div>
 <div class="item" style="border-bottom-color: lightblue; transform: rotateZ(60deg);"></div>
 <div class="item" style="border-bottom-color: slateblue; transform: rotateZ(120deg);"></div>
 <div class="item" style="border-bottom-color: slategrey; transform: rotateZ(180deg);"></div>
 <div class="item" style="border-bottom-color: olive; transform: rotateZ(240deg);"></div>
 <div class="item" style="border-bottom-color: salmon; transform: rotateZ(300deg);"></div>
</div>

/* ...other css */
.item {
    display: block;
    height: 0;
    width: 4px;
    border-width: 0 4px 80px 4px;
    border-style: none solid solid;
    border-color: transparent;
    position: absolute;
    transform-origin: bottom;
}
.container {
    display: inline-flex;
    justify-content: center;
    width: 160px;
    height: 160px;
    transform-origin: center;
    animation: rotateAnimate 10s linear infinite forwards;
    filter: drop-shadow(1px 1px 5px black)
}
@keyframes rotateAnimate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

上面這個(gè)例子中环肘，我們通過css邊框?qū)崿F(xiàn)了一個(gè)類似風(fēng)車的東西？我們可以看到集灌，使用drop-shadow后的陰影輪廓是圍繞元素中的非透明區(qū)域的悔雹；而如果我們使用的是box-shadow，陰影輪廓就會(huì)是矩形的

[圖片上傳失敗...(image-8661ce-1654243934506)]

grayscale

filter: grayscale(50%)

灰度欣喧，灰度表示以黑色為基準(zhǔn)色腌零，根據(jù)圖像原來的顏色，以不同飽和度的黑色來顯示圖像续誉；灰度有兩個(gè)非常實(shí)用的應(yīng)用場(chǎng)景：

圖標(biāo)點(diǎn)亮

filter: grayscale(1);

一般情況下我們需要準(zhǔn)備彩色和灰色兩份圖標(biāo)來表示點(diǎn)亮和未點(diǎn)亮狀態(tài)莱没，而使用grayscale濾鏡可以實(shí)現(xiàn)置灰效果，少準(zhǔn)備一份圖標(biāo)酷鸦；

網(wǎng)頁(yè)置灰

某些特殊節(jié)日我們可能需要將網(wǎng)站首頁(yè)置灰饰躲，通過灰度濾鏡，一行代碼就能快速實(shí)現(xiàn)

body {
 filter: grayscale(1);
}

hue-rotate

filter: hue-rotate(90deg)

色調(diào)旋轉(zhuǎn)臼隔，參數(shù)值為角度嘹裂，hue-rotate()函數(shù)可以調(diào)整元素的色調(diào)，但飽和度和亮度保持不變摔握；運(yùn)用該濾鏡可以快速實(shí)現(xiàn)相同風(fēng)格的顏色效果寄狼，比我們自己調(diào)試出來的亮紅配亮綠靠譜

button {
background-color: lightblue;
border-color: white;
}
button:nth-child(2) {
filter: hue-rotate(60deg)
}
button:nth-child(3) {
filter: hue-rotate(120deg)
}
button:nth-child(4) {
filter: hue-rotate(180deg)
}
button:nth-child(5) {
filter: hue-rotate(240deg)
}
button:nth-child(6) {
filter: hue-rotate(300deg)
}

invert

filter: invert(1);

反相，invert可以讓元素的亮度和色調(diào)同時(shí)反轉(zhuǎn)，參數(shù)值支持?jǐn)?shù)值和百分比值泊愧，invert配合hue-rotate可以在不太重要的頁(yè)面快速實(shí)現(xiàn)深色模式

<div class="card">
 <h4>Some Words</h4>
 <img src="https://picsum.photos/id/1080/6858/4574" alt="">
</div>

/* 通過媒體查詢判斷當(dāng)前用戶代理是設(shè)置是否處在黑暗模式 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #000;
        /* 將頁(yè)面所有內(nèi)容反相伊磺，調(diào)整色調(diào)以符合深色模式效果 */
        filter: invert(1) hue-rotate(180deg);
    }
    /* 圖片內(nèi)容反相后就不是原圖了，因此我們對(duì)圖片再次反相以恢復(fù)原來的樣子 */
    img {
        filter: invert(1) hue-rotate(180deg);
    }
}

這里我們可以在谷歌瀏覽器地址欄輸入 chrome://flags/删咱，搜索 dark 屑埋，找到 Auto Dark Mode for Web Contents 打開實(shí)驗(yàn)中的黑暗模式，重啟瀏覽器痰滋，就可以驗(yàn)證效果啦

saturate

filter: saturate(230%)

飽和度摘能，參數(shù)值支持?jǐn)?shù)值和百分比值，不傳值則默認(rèn)為1敲街；飽和度用來控制圖片中含色成分和消色成分（灰色）的比例团搞，飽和度越高，含色成分越高多艇，飽和度越低逻恐，消色成分越高，飽和度為0時(shí)表現(xiàn)為灰度效果峻黍，等同于 grayscale(1)

sepia

filter:sepia(60%)

褐色梢莽，參數(shù)支持?jǐn)?shù)值和百分比值，默認(rèn)值是0奸披；當(dāng)參數(shù)值為1時(shí)表現(xiàn)為深褐色昏名，可以用來實(shí)現(xiàn)老照片的效果；

contrast

filter: contrast(200%)

對(duì)比度阵面，參數(shù)值支持?jǐn)?shù)值和百分比值 轻局， 默認(rèn)值為1；值為0的時(shí)候表示無對(duì)比度样刷，圖片會(huì)變成一個(gè)灰色色塊仑扑，色值#808080；

opacity

filter: opacity(25%)

透明度置鼻，與opacity屬性基本一致镇饮，不推薦使用

完整代碼可以關(guān)注公眾號(hào) 前端一塊磚， 公眾號(hào)后臺(tái)回復(fù)：filter箕母，獲取codepen地址

參考

[1]《css新世界》

[2] 巧用CSS filter储藐，讓你的網(wǎng)站更加酷炫！