LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

🌌暗黑模式高效适配

freeflydom
2023年12月25日 16:0 本文热度 506


滤镜-反色

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

html {

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

}

html img, html svg {

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

  opacity: .85;

}


根节点设置180度反色,之后对图片进行再一次的180度反色(此时恢复成原色),然后稍微降低透明度。 不支持IE,其他端支持良好

滤镜-明度降低

直接对根节点进行滤镜明度降低,整站快速适配,不过不兼容IE filter: brightness(.5);

{   filter: brightness(.5); }


蒙层遮罩

可以background做蒙层、也可以shadow做蒙层、也可以outline做蒙层。

<!-- bgc-不兼容IE -->

<div class="mask"></div>

.mask {

  position: fixed;

  top: 0; left: 0; bottom: 0; right: 0;

  background-color: rgba(0, 0, 0, .1);

  z-index: 10000;

  pointer-events: none;

}


<!-- shadow-兼容IE9+ -->

<div class="mask"></div>

.mask {

  position: fixed;

  top: 0; left: 0;

  box-shadow: 0 0 0 200vh rgba(0, 0, 0, .1);

  z-index: 10000;

}


<!-- shadow-兼容IE8+ -->

<div class="mask"></div>

.mask {

  position: fixed;

  top: 0; left: 0;

  outline: 100vh solid rgba(0, 0, 0, .1);

  z-index: 10000;

}


方式选择推荐

  • 如果不涉及大量交互动画,首推通过媒体查询直接对支持深色模式的进行滤镜反色。

  • 有些非跟随系统设置,而是通过用户设置的开关进行控制的话,如果要考虑低端机兼容建议蒙层遮罩,这个不会有性能问题而且可以低端兼容


作者:Shinea
链接:https://juejin.cn/post/7038175230891655205
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



该文章在 2023/12/25 16:01:21 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved