美文网首页
css一行代码实现黑暗模式

css一行代码实现黑暗模式

作者: 一只随遇而安的程序员 | 来源:发表于2020-10-14 16:27 被阅读0次

    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,从父元素继承

    相关文章

      网友评论

          本文标题:css一行代码实现黑暗模式

          本文链接:https://www.haomeiwen.com/subject/eajwpktx.html