說(shuō)起濾鏡可能大家首先想到的就是 PhotoShop 之類(lèi)的制圖軟件，通過(guò)此類(lèi)軟件的濾鏡可以對(duì)圖片進(jìn)行美化。而在 CSS 中，我們無(wú)需借助任何軟件也可以實(shí)現(xiàn)很多種濾鏡效果，例如模糊效果、透明效果、色彩反差調(diào)整、色彩反相等等。另外，通過(guò) CSS 中的濾鏡還能對(duì)網(wǎng)頁(yè)中的元素或者視頻進(jìn)行處理。本篇我們就來(lái)學(xué)習(xí)一下 CSS 中濾鏡的使用。
CSS 中實(shí)現(xiàn)濾鏡效果需要通過(guò) filter 屬性
并且配合一些函數(shù)來(lái)實(shí)現(xiàn)，如下所示：
| 濾鏡 | 描述 |
| none | 默認(rèn)值，表示沒(méi)有效果 |
| blur(px) | 為圖像設(shè)置高斯模糊，默認(rèn)值為 0，單位為像素，值較大越模糊 |
| brightness(%) | 調(diào)整圖像的亮度，默認(rèn)值為 100％，代表原始圖像；0％ 表示沒(méi)有亮度，圖像將完全變黑；當(dāng)值超過(guò) 100％ 時(shí)圖像將變得更亮 |
| contrast(%) | 調(diào)整圖像的對(duì)比度，默認(rèn)值為 100％，代表原始圖像；0％ 將使圖像完全變黑；當(dāng)值超過(guò) 100％ 時(shí)圖像將獲得更高的對(duì)比度 |
| drop-shadow(h-shadow v-shadow blur spread color) | 為圖像添加陰影效果，參數(shù)說(shuō)明如下： ● h-shadow：必填值，指定水平方向陰影的像素值，若值為負(fù)，則陰影會(huì)出現(xiàn)在圖像的左側(cè)； ● v-shadow：必填值，指定垂直方向陰影的像素值，若值為負(fù)，則陰影會(huì)出現(xiàn)在圖像的上方； ● blur：可選值，為陰影添加模糊效果，默認(rèn)值為 0，單位為像素，值越大創(chuàng)建的模糊就越多（陰影會(huì)變得更大更亮），不允許使用負(fù)值； ● spread：可選值，默認(rèn)值為 0，單位為像素。若值為正，則陰影將會(huì)擴(kuò)展并增大；若值為負(fù)，則陰影會(huì)縮??； ● color：可選值，為陰影添加顏色，如未指定，則由瀏覽器來(lái)絕對(duì)，通常為黑色。 注意：Chrome、Safari 和 Opera 等瀏覽器不支持第 4 個(gè)參數(shù)，如果添加，則不會(huì)有任何效果 |
| grayscale(%) | 將圖像轉(zhuǎn)換為灰度圖像，默認(rèn)值為 0%，表示原始圖像；100％ 表示將圖像完全變成灰度圖像（即黑白圖像），不允許為負(fù)值 |
| hue-rotate(deg) | 給圖像應(yīng)用色相旋轉(zhuǎn)，該值用來(lái)定義色環(huán)的度數(shù)，默認(rèn)值為 0deg，代表原始圖像，最大值為 360deg |
| invert(%) | 反轉(zhuǎn)圖像，默認(rèn)值為 0%，表示原始圖像；100% 則表示完全反轉(zhuǎn)，不允許使用負(fù)值 |
| opacity(%) | 設(shè)置圖像的不透明度，默認(rèn)值為 100%，表示原始圖像；0% 表示完全透明，不允許使用負(fù)值 |
| saturate(%) | 設(shè)置圖像的飽和度，默認(rèn)值為 100%，表示原始圖像；0% 表示圖像完全不飽和，不允許使用負(fù)值 |
| sepia(%) | 將圖像轉(zhuǎn)換為棕褐色，默認(rèn)值為 0%，表示原始圖像；100% 表示圖像完全變成棕褐色，不允許使用負(fù)值 |
| url() | url() 函數(shù)用來(lái)指定一個(gè) XML 文件，文件中設(shè)置了一個(gè) SVG 濾鏡，并且可以包含一個(gè)錨點(diǎn)來(lái)指定具體的濾鏡元素 |
| initial | 將屬性設(shè)置為其默認(rèn)值 |
| inherit | 從父元素繼承此屬性的值 |
舉例：
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
float: left;
position: relative;
}
div span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-shadow: 1px 1px 2px black;
}
img {
width: 100%;
}
div img.blur {
filter: blur(4px);
}
div img.brightness {
filter: brightness(250%);
}
div img.contrast {
filter: contrast(180%);
}
div img.grayscale {
filter: grayscale(100%);
}
div img.huerotate {
filter: hue-rotate(180deg);
}
div img.invert {
filter: invert(100%);
}
div img.opacity {
filter: opacity(50%);
}
div img.saturate {
filter: saturate(7);
}
div img.sepia {
filter: sepia(100%);
}
div img.shadow {
filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<div><img src="./scenery.jpg" alt="tulip"> <span>原始圖像</span></div>
<div><img class="blur" src="./scenery.jpg" alt="tulip"> <span>blur(4px)</span></div>
<div><img class="brightness" src="./scenery.jpg" alt="tulip"><span>brightness(250%)</span></div>
<div><img class="contrast" src="./scenery.jpg" alt="tulip"> <span>contrast(180%)</span></div>
<div><img class="grayscale" src="./scenery.jpg" alt="tulip"> <span>grayscale(100%)</span></div>
<div><img class="huerotate" src="./scenery.jpg" alt="tulip"> <span>hue-rotate(180deg)</span></div>
<div><img class="invert" src="./scenery.jpg" alt="tulip"> <span>invert(100%)</span></div>
<div><img class="opacity" src="./scenery.jpg" alt="tulip"> <span>opacity(50%)</span></div>
<div><img class="saturate" src="./scenery.jpg" alt="tulip"> <span>saturate(7)</span></div>
<div><img class="sepia" src="./scenery.jpg" alt="tulip"> <span>sepia(100%)</span></div>
<div><img class="shadow" src="./scenery.jpg" alt="tulip"> <span>drop-shadow(8px 8px 10px green)</span></div>
</body>
</html>風(fēng)景圖片：
運(yùn)行結(jié)果：
C語(yǔ)言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫(xiě)的：零基礎(chǔ)C語(yǔ)言學(xué)練課程
解決困擾你多年的C語(yǔ)言疑難雜癥特性的C語(yǔ)言進(jìn)階課程
從零到寫(xiě)出一個(gè)爬蟲(chóng)的Python編程課程
只會(huì)語(yǔ)法寫(xiě)不出代碼？手把手帶你寫(xiě)100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門(mén)課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程