🌌暗黑模式高效適配
當(dāng)前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
濾鏡-反色
html { filter: invert(1) hue-rotate(180deg); } html img, html svg { filter: invert(1) hue-rotate(180deg); opacity: .85; } 根節(jié)點設(shè)置180度反色，之后對圖片進行再一次的180度反色（此時恢復(fù)成原色），然后稍微降低透明度。 不支持IE，其他端支持良好 濾鏡-明度降低直接對根節(jié)點進行濾鏡明度降低，整站快速適配，不過不兼容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 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
