CSS | Filter

2022-01-26

整理 CSS Filter 對於圖片的濾鏡效果使用，包含 Blur, Contrast, Grayscale, Hue-rotate, Invert, Opacity, Saturate 以及 Sepia。

說明

Original

Blur

img {
  filter: blur(5px)
}

Contrast

img {
  filter: contrast(160%)
}

Grayscale

img {
  filter: grayscale(100%)
}

Hue-rotate

img {
  filter: hue-rotate(100deg)
}

Invert

img {
  filter: invert(75%)
}

Opacity

img {
  filter: opacity(50%)
}

Saturate

img {
  filter: saturate(5);
}
.img2 {
  filter: saturate(25);
}

Sepia

img {
  filter: sepia(100%)
}