Loading...

CSS3濾鏡Filter的十種特效

Temperature: 0 °C

Mark ChangMark Chang
author_tools

CSS3 濾鏡效果 Filters 主要是運用在圖片上,以實現一些特效。

grayscale 灰階
sepia 復古色
saturate 飽和度
hue-rotate 色相旋轉
invert 負片
opacity 透明度
brightness 亮度
contrast 對比色
blur 模糊
drop-shadow 陰影


原圖

CSS3濾鏡Filter的十種特效
grayscale 灰階

CSS3濾鏡Filter的十種特效
.grayscale{
-webkit-filter:grayscale(1);
}

grayscal()將網頁上影像轉換成灰階影像。
括符裡可以使用0% 到100%的百分比控制,也可以使用0至1的數字控制。
0和0%表示顏色不變,1和100%則是去掉任何色彩的灰階影像,感覺就像Photoshop裡的去除飽和度。

灰階影像除了純黑和純白之外,還可以包含深淺不同的灰色,也就是在黑色與白色之間加上不同的色階 。


sepia 復古色

CSS3濾鏡Filter的十種特效
.sepia{
-webkit-filter:sepia(1);
}

sepia()將網頁上影像疊上一層深褐色,產生復古懷舊照片的效果。
控制的方法和grayscal()一樣,0和0%表示顏色不變,1和100%則讓影像轉變成只有褐色的單色影像、就和老照片一樣。

saturate 飽和度

CSS3濾鏡Filter的十種特效
.saturate{
-webkit-filter:saturate(1.5);
}

saturate()將網頁上影像調整影像的飽和度,可以讓影像看來更加鮮艷。
1和100%表示顏色不變,小於1和100%是降低飽和度,大於1和100%則是增加飽和度。

hue-rotate 色相旋轉

CSS3濾鏡Filter的十種特效
.hue-rotate{
-webkit-filter:hue-rotate(180deg);
}

hue-rotate()這個濾鏡比較特別,可以透過旋轉色相環將網頁上影像產生很特殊的顏色效果。
因為是旋轉色相環,所以使用角度(0deg – 360deg)來控制。

invert 負片

CSS3濾鏡Filter的十種特效
.invert{
-webkit-filter:invert(1);
}

invert()讓網頁上影像看起來像底片一樣。
使用1或100%會讓影像明暗相反顏色轉變成補色。
0和0%表示顏色不變,介於0和1則會顯示轉化中的效果。

opacity 透明度

CSS3濾鏡Filter的十種特效
.opacity{
-webkit-filter:opacity(.2);
}

opacity()讓網頁上影像呈現透明的效果。
0表示完全透明,1表示完全不透明。
介於0和1之間則是半透明狀態,同樣的透明度可以用百分比來設定。

brightness 亮度

CSS3濾鏡Filter的十種特效
.brightness{
-webkit-filter:brightness(.5);
}

brightness()將影像就像調整螢幕的亮度一樣,你可以增加或減少亮度,默认值:100%。
以百分比為例100%表示不變,小於100%則是減少亮度,大於100%則是增加亮度,設成0%會讓影像完全變黑。

contrast 對比色

CSS3濾鏡Filter的十種特效
.contrast{
-webkit-filter:contrast(2);
}

contrast()將影像調整畫面明亮和陰暗部份之間的差距,默认值:100%。
以數字為例設定為0,影像中明亮和陰暗部份沒有了差距,影像就變成了灰色的色塊。
以百分比為例100%表示顏色不變,若大於100%則明暗之間的差距就會加大。

blur 模糊

CSS3濾鏡Filter的十種特效
.blur{
-webkit-filter:blur(3px);
}

blur()顧名思義就是讓影像模糊的效果,將括符裡要設定模糊的程度。
將括符裡數字加上單位,例如:px 或 em。

drop-shadow 陰影

CSS3濾鏡Filter的十種特效
.drop-shadow{
-webkit-filter:drop-shadow(3px 3px 3px #000);
}

drop-shadow()可以讓影像產生類似box-shadow的效果,就是直接讓影像底下產生一塊陰影。

https://innstory.com/story-CSS3濾鏡Filter的十種特效-1584
CSS

Prev
 分享_aha__Take_On_Me_Official_Video

Next
分享_壞處多過好處蘋果共同創辦人Steve_Wozniak要脫離臉書了 

About the Author

Mark Chang

離不開電腦的宅男

Visitor message

Leave some footprints to prove that you visited me

Recommended reading

Author's other related stories

在PHP裡添加HTTP Strict Transport Security

在PHP裡添加HTTP St...

要通過 PHP 啟用 HTTP 嚴格傳輸安全,請使用以下設定。 <?php //告訴瀏覽器站點只能通...

如何將 a href 禁用

如何將 a href 禁用

如標題,若採用CSS的方式作法如下: .disabled { pointerevents: none...

如何將mysql table auto_increment重設

如何將mysql table...

photo555 資料表裡的資料加加減減,一不小心突然驚覺當初的欄位長度設定的不夠⊙⊙ 當然,你可以...

Please select an option

error

Hi, thank you for your participation, but you cannot vote repeatedly~

Join innstory now and start recording your story.

"Innstory" is a place to store stories. We are committed to becoming a warm platform. Deepening the bonds between people is our direction.
We are convinced that the blockchain between people is not just a cold calculation. Join us now.

Wrong format