建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
CSSfilter（濾鏡）詳解
說(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)行處理。本節(jié)我們就來(lái)學(xué)習(xí)一下 CSS 中濾鏡的使用。
圖：filter 屬性演示
圖：濾鏡的組合使用
圖：為頁(yè)面中的其它元素設(shè)置濾鏡效果
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ō)明如下：
注意：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 | 從父元素繼承此屬性的值 |
提示：這些 CSS 函數(shù)的參數(shù)值基本上都在 0~1（0%~100%）之間，但也有幾個(gè)例外，比如 blur() 函數(shù)的參數(shù)值以像素為單位，而 hue-rotate() 函數(shù)的參數(shù)值則是以“deg”為單位。
【示例】下面通過(guò)一個(gè)示例來(lái)演示 CSS 中濾鏡的使用：
原始圖像
blur(4px)
brightness(250%)
contrast(180%)
grayscale(100%)
hue-rotate(180deg)
invert(100%)
opacity(50%)
saturate(7)
sepia(100%)
drop-shadow(8px 8px 10px green)
運(yùn)行結(jié)果如下圖所示：
圖：filter 屬性演示
另外，您也可以為同一個(gè)元素使用多個(gè)濾鏡效果，只需要將每個(gè)濾鏡函數(shù)使用空格分隔，示例代碼如下：
sepia(90%) saturate(400%) brightness(150%)
運(yùn)行結(jié)果如下圖所示：
圖：濾鏡的組合使用
注意：在組合使用多個(gè)濾鏡效果時(shí)，要特別注意使用的順序，否則會(huì)產(chǎn)生意料之外的效果，例如在使用 grayscale() 之后再使用 sepia() 將產(chǎn)生一個(gè)完整的灰度圖片。
不僅僅是圖像，任何 HTML 元素都可以使用濾鏡效果，例如文本、視頻等都可以使用濾鏡來(lái)美化，示例代碼如下：
說(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)行處理。
運(yùn)行結(jié)果如下圖所示：
圖：為頁(yè)面中的其它元素設(shè)置濾鏡效果
提示：IE 瀏覽器不支持 filter 屬性
文章名稱(chēng)：CSSfilter（濾鏡）詳解
當(dāng)前地址：http://www.dlmjj.cn/article/djcjcei.html
