CSS 的 filter 濾鏡
最近又學了新的CSS技巧,filter濾鏡效果,使用這個就可以直接改變圖片風格。
會用到filter主要是因為我想讓我的首頁輪播的背景圖片變淡,如果直接使用CSS就可以自動為每張圖片定義相同風格了。
有幾種filter可以用呢?
總共有10種filter可以使用
● brightness 亮度
初始設定為 1 或是 100%。
數值加大就變亮;數值減少就變暗。
img {
-webkit-filter: brightness(0.5); /* Safari */
filter: brightness(0.5);
}
● contrast 對比
初始設定為 1 或是 100%。
數值加大,增加對比;數值減少,對比降低。
img {
-webkit-filter: contrast(0.5); /* Safari */
filter: contrast(0.5);
}
● saturate 色彩鮮豔度、飽和度
初始設定為 1 或是 100%。
數值加大,增加飽和度;數值減少,降低飽和度。
img {
-webkit-filter: saturate(0.5); /* Safari */
filter: saturate(0.5);
}
● grayscale 灰階色彩
初始設定為 0 或是 0%。
數值越大,灰階程度越高,最高到 1 或 100%。
img {
-webkit-filter: brightness(0.5); /* Safari */
filter: brightness(0.5);
}
● sepia 懷舊 (舊照片偏黃效果)
初始設定為 0 或是 0%。
數值越大,偏黃項果越強,最高到 1 或 100%。
img {
-webkit-filter: sepia(0.5); /* Safari */
filter: sepia(0.5);
}
● invert 負片
初始設定為 0 或是 0%。
數值越大,效果越強,最高到 1 或 100%。
img {
-webkit-filter: invert(0.5); /* Safari */
filter: invert(0.5);
}
● hue-rotate 色相旋轉
初始設定為 0 deg (單位是度 degree)。
範圍從 0 ~ 360 deg。
img {
-webkit-filter: hue-rotate(90deg); /* Safari */
filter: hue-rotate(90deg);
}
● blur 模糊
初始設定為 0 px (單位是像素 pixel)。
數值越大,圖片越模糊。
img {
-webkit-filter: blur(5px); /* Safari */
filter: blur(5px);
}
● opacity 透明度
初始設定為 1 或 100%。
範圍從 0 (0%) ~ 1 (100%)。當設定 0 時,圖片就會完全透明 (此時圖片是存在頁面中)。
img {
-webkit-filter: opacity(0.5); /* Safari */
filter: opacity(0.5);
}
● drop-shadow 下拉陰影
drop-shadow(水平 垂直 模糊度 擴大 顏色)
水平/垂直(px):設定陰影的位置。
模糊度(px):設定陰影模糊程度,值越大就越模糊。
擴大(px):設定陰影模糊放大的程度,一樣是值越大就越就越大。
顏色(色碼):設定陰影的顏色。
img {
-webkit-filter: drop-shadow(8px 8px 10px #000); /* Safari */
filter: drop-shadow(8px 8px 10px #000);
}