🌌暗黑模式高效适配
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
滤镜-反色
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); } 蒙层遮罩可以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; } 方式选择推荐
该文章在 2023/12/25 16:01:21 编辑过 |
关键字查询
相关文章
正在查询... |