12/27/2023

AI 摘要

本文介绍了两种实现图片暗黑模式的 CSS 技巧：使用 invert(1) 实现色相反转适用于黑白图片，而 brightness(0.5) contrast(1.2) saturate(0.7) 更适合彩色图片，以调整亮度、对比度和饱和度实现暗黑效果。

CSS 技巧

图片的暗黑模式

最简单和有效的方法还是反转色相，在图片颜色偏白/黑的场景下效果很不错，因为色相反转后还是黑/白，视觉上不会太冲突

img {
    filter: invert(1);
}

而对于颜色非黑白向的图片，比如说五颜六色的图片，或者人像场景，上面的滤镜出来的效果会非常奇怪，所以只能用更加通用的方法：调整饱和度，亮度和对比度，效果像加了一层遮罩

img {
    filter: brightness(0.5) contrast(1.2) saturate(0.7);
}