CSS3濾鏡Filter的十種特效
Temperature: 0 °C
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
CSS
