Loading...

CSS3濾鏡Filter的十種特效

Temperature: 0 °C

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

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


原圖


grayscale 灰階


.grayscale{
-webkit-filter:grayscale(1);
}

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

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


sepia 復古色


.sepia{
-webkit-filter:sepia(1);
}

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

saturate 飽和度


.saturate{
-webkit-filter:saturate(1.5);
}

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

hue-rotate 色相旋轉


.hue-rotate{
-webkit-filter:hue-rotate(180deg);
}

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

invert 負片


.invert{
-webkit-filter:invert(1);
}

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

opacity 透明度


.opacity{
-webkit-filter:opacity(.2);
}

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

brightness 亮度


.brightness{
-webkit-filter:brightness(.5);
}

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

contrast 對比色


.contrast{
-webkit-filter:contrast(2);
}

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

blur 模糊


.blur{
-webkit-filter:blur(3px);
}

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

drop-shadow 陰影


.drop-shadow{
-webkit-filter:drop-shadow(3px 3px 3px #000);
}

drop-shadow()可以讓影像產生類似box-shadow的效果,就是直接讓影像底下產生一塊陰影。
https://innstory.com/story-CSS3濾鏡Filter的十種特效-1584

作者簡介

Mark Chang

離不開電腦的宅男

訪客留言

留下一些足跡證明你來拜訪過我

推薦閱讀

作者其他相關類別故事

centos查看對外開放了那些port的指令

centos查看對外開放了那些port的指令

輸入指令 [root@localhost ~]# iptables L n 得到以下結...

設置屬性 PHP PDO setAttribute

設置屬性 PHP PDO setAttribute

PDO::ATTRCASE:強制列名為指定的大小寫。 PDO::CASELOWER:強...

分享 斜槓青年正夯,什麼都會才是王道?他舉賈伯斯、巴菲特為例,勸你萬萬不可跨領域-風傳媒

分享 斜槓青年正夯,什麼都會才是王道?他舉賈伯斯、巴菲特為例,勸你萬萬不可跨領域-風傳媒

巴菲特:「了解自己的能力圈,待在裡面。這個圈圈到底有多大其實無關緊要。知道圈圈的邊線究...

請選擇選項

執行錯誤

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

現在就加入innstory,開始紀錄你的故事。

「innstory」是一個儲存故事的地方,我們致力於成為一個有溫度的平台,加深人與人之間的羈絆是我們所努力的方向。
我們深信人與人間的區塊鏈不是只是冷冰冰的運算。現在就加入我們。