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