1. 程式人生 > >CSS3濾鏡

CSS3濾鏡

() rop add 書寫 mic bsp .com left filter

瀏覽器支持

css3濾鏡的功能看起來很是酷炫,省去了很多處理圖片的時間,也幫助了對於不會修圖的我(尷尬而不失禮貌的微笑),但是越是酷炫的姿勢越是沒有多少瀏覽器欣賞,所以對於要兼容各大主流瀏覽器的童鞋們就觀望一下就好。

技術分享

書寫格式

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
[註]:如果想要同時實現多個效果,每個效果之間加空格隔開。
none 默認值,無效果
blur(px)

給元素設置高斯模糊。

單位是像素值,不接受百分比值,如果沒有設定值,則默認是0,無模糊效果;值越大越模糊

brightness(%)

給元素應用一種線性乘法,使其看起來更亮或更暗。

單位是百分比值,如果沒有設定值,默認是1(100%),無效果;如果值是0%,圖像會全黑;其他的值對應線性乘數效果,超過100%圖像會比原圖更亮。

contrast(%)

調整圖像的對比度。

單位是百分比值,如果沒有設定值,默認是1(100%),無效果;如果值是0%,圖像會全黑;超過100%圖像運用更低的對比。

drop-shadow(h-shadow v-shadow blur spread color
)

給圖像設置陰影效果。

<h-shadow> (必須):設置陰影偏移量。 設定水平方向距離, 負值會使陰影出現在元素左邊。

<v-shadow>(必須):設置陰影偏移量。設定垂直距離,負值會使陰影出現在元素上方。

<blur-radius> (可選):設置陰影模糊值。 值越大,越模糊,則陰影會變得更大更淡。不允許負值,若未設定,默認是0 (則陰影的邊界很銳利)。

<spread-radius> (可選):設置陰影範圍。正值會使陰影擴張和變大,負值會是陰影縮小。若未設定,默認是0 (陰影會與元素一樣大小)。

[註]:Webkit, 以及一些其他瀏覽器 不支持第四個長度,如果加了也不會渲染。

<color> (可選):設置陰影顏色。若未設定,顏色值基於瀏覽器。如果顏色值省略,WebKit中陰影是透明的。

grayscale(%)

將圖像轉換為灰度圖像。

值定義轉換的比例。如果沒有設定值,默認是0,無效果;值為100%則完全轉為灰度圖像。值在0%到100%之間,則是效果的線性乘子。

hue-rotate(deg)

給圖像應用色相旋轉。

單位是色環角度值。如果沒有設定值,默認是0deg,無效果。該值雖然沒有最大值,超過360deg的值相當於又繞一圈。

invert(%)

反轉輸入圖像。

值定義轉換的比例。如果沒有設定值,默認是0,無效果。值為100%則是完全反轉。值在0%和100%之間,則是效果的線性乘子。

opacity(%)

轉化圖像的透明程度。

值定義轉換的比例。如果沒有設定值,默認是1,無效果。值為0%則是完全透明。值在0%和100%之間,則是效果的線性乘子。

該函數與已有的opacity屬性很相似,不同之處在於通過filter,一些瀏覽器為了提升性能會提供硬件加速。

saturate(%)

轉換圖像飽和度。

值定義轉換的比例。如果沒有設定值,默認是1,無效果。值為0%則是完全不飽和。其他值,則是效果的線性乘子。超過100%圖像有更高的飽和度。

sepia(%)

將圖像轉換為深褐色。

值定義轉換的比例。如果沒有設定值,默認是0,無效果。值為100%則是深褐色的。值在0%和100%之間,則是效果的線性乘子。

url()

URL函數接受一個XML文件,該文件設置了 一個SVG濾鏡,且可以包含一個錨點來指定一個具體的濾鏡元素。

例如:filter: url(svg-url#element-id)

舉個栗子

1、filter:none;

技術分享

2、filter:blur(10px);

技術分享

3、filter:brightness(200%);

技術分享

4、filter: contrast(200%);

技術分享

5、filter:drop-shadow(10px 10px 10px #ccc);

技術分享

6、filter:grayscale(50%) hue-rotate(30deg) invert(30%) opacity(50%) saturate(200%) sepia(50%);

技術分享

CSS3濾鏡