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);
}

Refer

• CSS 筆記 – CSS Filter 濾鏡效果 | TimCodingBlog (hsuchihting.github.io)
• 什麼?? CSS也有濾鏡可以用! (CSS3 filter) ─藝誠網頁設計公司 (eztrust.com.tw)