CSS - 001 - filter

001

＋ 主題 - filter、position

github連結

＋ css語法筆記 -

fliter : 提供圖片濾鏡。像是透明度與明度彩度的調整。有十種屬性：
blur 模糊
brightness 亮度
contrast 對比
drop-shadow 下拉陰影
grayscale 灰階
hue-rotate 色相旋轉
invert 負片
opacity 透明度
saturate 飽和度
sepia 復古
*url()可以引用濾鏡


原圖


模糊 blur(); 不接受百分比，()裡加數值及單位，如：5px、10rem





亮度 brightness(%); 0是黑色，1或100%是不變，100%以上是變亮




對比 contrast(%); 0是黑色，1或100是不變，100%以上是加強對比



下拉陰影 drop shadow(x y blur color); 
和box-shadow很像，不同的地方是 
1.支援圖片是透明背景
2.並且圖片的透明度對其有影響
3.可以對偽元素有作用
4.沒有inset



灰階 grayscale(); 100%全灰階，0%無變化，值在0~100%之間

色相翻轉 hue-rotate(deg); 360度色環，0=360=無變化



負片效果 invert(%); 100%全反轉，0%無變化，值在0~100%之間



透明度 opacity(%); 100%不變，0%無變化，值在0~100%之間

飽和度 saturate(%); 100%不變，0%無變化，100%以上是增加飽和度

復古 sepia(%); 100%不變，0%無變化，值在0~100%之間