CSS3菜鳥(niǎo)教程
CSS3 濾鏡(Filters)
CSS3濾鏡效果提供了一種將視覺(jué)效果應(yīng)用于圖像的簡(jiǎn)便方法。
了解CSS3濾鏡功能
在本章中，我們將討論CSS3中引入的濾鏡效果，您可以在將濾鏡效果繪制到網(wǎng)頁(yè)上之前，對(duì)圖像等圖形元素執(zhí)行視覺(jué)效果操作，如模糊，平衡對(duì)比度或亮度，色彩飽和度等。
可以使用CSS3 filter屬性將濾鏡效果應(yīng)用于元素，該屬性按提供的順序接受一個(gè)或多個(gè)濾鏡功能。使用示例如下：
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();
警告：任何版本的Internet Explorer當(dāng)前均不支持CSS3濾鏡效果。較舊的IE版本支持非標(biāo)準(zhǔn)filter屬性來(lái)創(chuàng)建諸如不透明度之類(lèi)的效果，但是該功能已被棄用。
模糊效果
像高斯模糊效果這樣的Photoshop可以使用該blur()功能應(yīng)用于元素。此函數(shù)接受CSS長(zhǎng)度值作為定義模糊半徑的參數(shù)。較大的值將產(chǎn)生更多的模糊。如果未提供參數(shù)，則使用值0。
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}測(cè)試看看?/?—上面示例的輸出如下所示：
 | | |
| blur(0) | blur(2px) | blur(5px) |
設(shè)置圖像亮度
brightness()功能可用于設(shè)置圖像的亮度。的值0%將創(chuàng)建全黑的圖像。而值100%或1使圖像不變。其他值是效果的線性乘數(shù)。
您還可以將亮度設(shè)置為高于100％，這樣可以使圖像更亮。如果缺少數(shù)量參數(shù)，則使用值1。不允許使用負(fù)值。
img.bright {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
img.dark {
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| brightness(50%) | brightness(100%) | brightness(200%) |
注意：75%接受以百分號(hào)表示的值（例如）的過(guò)濾器函數(shù)也接受以十進(jìn)制表示的值（如0.75）。如果該值無(wú)效，該函數(shù)將返回none并且將不應(yīng)用任何濾鏡效果。
調(diào)整圖像對(duì)比度
contrast()功能用于調(diào)整圖像的對(duì)比度。的值0%將創(chuàng)建全黑的圖像。而值100%或1保持圖像不變。還允許超過(guò)100％的值，從而提供對(duì)比度較低的結(jié)果。如果數(shù)量參數(shù)缺失或省略，1則使用值。
img.bright {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
img.dim {
-webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
filter: contrast(50%);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| contrast(50%) | contrast(100%) | contrast(200%) |
向圖像添加陰影
您可以使用該drop-shadow()功能將陰影效果應(yīng)用于Photoshop等圖像。此功能類(lèi)似于該box-shadow屬性。
img {
-webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
filter: drop-shadow(4px 4px 10px orange);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| drop-shadow(0) | drop-shadow(2px 2px 4px orange) | drop-shadow(4px 4px 10px orange) |
注意：drop-shadow()函數(shù)的第一個(gè)和第二個(gè)參數(shù)分別指定陰影的水平和垂直偏移，而第三個(gè)參數(shù)指定模糊半徑，最后一個(gè)參數(shù)指定陰影顏色，就像該box-shadow屬性一樣，但有一個(gè)例外，' inset'不允許使用關(guān)鍵字。
將圖像轉(zhuǎn)換為灰度
使用此grayscale()功能可以將圖像轉(zhuǎn)換為灰度。值100%完全是灰度。值0%保留圖像不變。之間的值0%并且100%是在效果線性乘法器。如果缺少數(shù)量參數(shù)，則使用值0。
img.complete-gray {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
img.partial-gray {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| grayscale(0) | grayscale(50%) | grayscale(100%) |
在圖像上應(yīng)用色相旋轉(zhuǎn)
該hue-rotate()功能在圖像上應(yīng)用色相旋轉(zhuǎn)。傳遞的參數(shù)定義了將調(diào)整圖像樣本的色環(huán)周?chē)亩葦?shù)。值0deg保留圖像不變。如果angle缺少' '參數(shù)，0deg則使用值。沒(méi)有最大值，上面的值的效果會(huì)360deg回繞。
img.hue-normal {
-webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
filter: hue-rotate(150deg);
}
img.hue-wrap {
-webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
filter: hue-rotate(480deg);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| hue-rotate(0) | hue-rotate(150deg) | hue-rotate(480deg) |
反轉(zhuǎn)效果
可以使用invert()函數(shù)將像Photoshop這樣的反轉(zhuǎn)效果應(yīng)用于圖像。 100％或1的值被完全反轉(zhuǎn)。 值為0％會(huì)使輸入保持不變。 0％到100％之間的值是效果的線性乘數(shù)。 如果缺少“amount”參數(shù)，則使用值0。 不允許使用負(fù)值。
img.partially-inverted {
-webkit-filter: invert(80%); /* Chrome, Safari, Opera */
filter: invert(80%);
}
img.fully-inverted {
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| invert(0) | invert(80%) | invert(100%) |
對(duì)圖像應(yīng)用不透明度
opacity()功能可用于為圖像添加透明度。值0%是完全透明的。的值100%或1保持圖像不變。之間的值0%并且100%是在效果線性乘法器。如果缺少' amount'參數(shù)，則使用值1。此功能類(lèi)似于該opacity屬性。
img {
-webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
filter: opacity(80%);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| opacity(100%) | opacity(80%) | opacity(30%) |
將棕褐色效果應(yīng)用于圖像
該sepia()功能將圖像轉(zhuǎn)換為棕褐色。的值100%或者1完全是深褐色。值0%保留圖像不變。之間的值0%并且100%是在效果線性乘法器。如果缺少' amount'參數(shù)，則使用值0。
img.complete-sepia {
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}
img.partial-sepia {
-webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
filter: sepia(30%);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| sepia(0%) | sepia(30%) | sepia(100%) |
提示：在攝影方面，棕褐色調(diào)是一種特殊的處理方法，可以使黑白照片具有較暖的色調(diào)（紅棕色），以增強(qiáng)其存檔質(zhì)量。
調(diào)整圖像的飽和度
該saturate()功能可用于調(diào)整圖像的飽和度。值0%完全不飽和。值100%保留圖像不變。其他值是效果的線性乘數(shù)。還允許值超過(guò)100％，從而提供超飽和結(jié)果。如果缺少'amount '參數(shù)，則使用值1。
img.un-saturated {
-webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
filter: saturate(0%);
}
img.super-saturated {
-webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
filter: saturate(200%);
}測(cè)試看看?/?—上面示例的輸出如下所示：
| | | |
| saturate(100%) | saturate(200%) | saturate(0%) |
注意：該url()函數(shù)指定對(duì)特定過(guò)濾器元素的過(guò)濾器引用。例如，url(commonfilters.svg#foo)。如果過(guò)濾器對(duì)不存在的元素的引用或所引用的元素不是過(guò)濾器元素，則整個(gè)過(guò)濾器鏈都將被忽略。沒(méi)有過(guò)濾器應(yīng)用于元素。