Skip to content
0

CSS 技巧

图片的暗黑模式

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

img {
    filter: invert(1);
}

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

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

Released under the MIT License.