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