css一行代码实现黑暗模式

filter: invert(1) hue-rotate(180deg);

使用filter属性,一行样式就能改变元素配色

filter函数支持一下选项:

blur(5px),修改高斯模糊,接受像素值,不接受百分比

brightness(5%),修改亮度0%全黑,100%则无变化

cintrast(5%),修改对比度,0%全黑,100%无变化

drop-shadow(h-shadow v-shadow blur spread color),设置阴影效果

grayscale(5%),将图像转换为灰度图像,0%无变化,100%为灰度图像

hue-rotate(180deg),将图像应用色相旋转,0deg无变化,180deg未完全相反

invert(100%),反转输入图像,100%完全反转,0%无变化

opacity(50%),转换透明度

saturate(100%),0%完全不饱和,100%完全饱和

sepia(100%),将图像转换为深褐色,100%完全深褐色

url(),URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素

initial,默认

inherit,从父元素继承

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。