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

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

要如何知道ajax執行失敗原因?

要如何知道ajax執行失敗原因?

只要在error的function 更改為以下寫法即可: error:...

php檢查陣列中大於0的值

php檢查陣列中大於0的值

假設有一個陣列$a $a = array(,,,,,,); 取得大於的數值有幾個 $...

ajax錯誤訊息提示

ajax錯誤訊息提示

pexelsphoto ajax目前已經是我寫系統使用非常普遍的方式~ 雖說常寫,但偶...

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