記憶加載中,請稍待...
Hello,你已經閒置了一些時間~
或許,你有興趣閱讀一篇故事:
Mark Chang
胡言亂語
選擇大頭貼照
重新調整位置

CSS3濾鏡Filter的十種特效

收藏小紙條

無法截取內容!!但仍舊可以收藏小紙條

2018-04-07 Mark Chang 265 0
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的效果,就是直接讓影像底下產生一塊陰影。
閱讀分類:CSS  

其他您可能會有興趣的故事

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

須同意使用 Email 才可進入此頁面

須同意使用 姓名 才可進入此頁面

須同意使用 性別 才可進入此頁面

須同意應用程式才能使用Facebook帳號進入此頁面

請重新登入!

Hi,謝謝你的參與,但無法重複投票哦~

Hi,請選擇一個你認為的答案

錯誤的URL...

執行錯誤...

別忘了填寫欄位...

輸入格式錯誤...

Email已經有人使用...

請填寫Email...

請填寫正確的Email...

密碼裡需包含英文字及數字8至12...

確認密碼是否與密碼相同...

很抱歉 您並沒有權限!請確認您的帳號密碼 或請連絡我們

正在更新排序...

帳號已經存在!請確認您的帳號密碼 或請連絡我們...