,,

<delect id="gsyyy"></delect>

🌌暗黑模式高效適配

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年12月25日 16:0 本文熱度 1155

濾鏡-反色

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協同辦公管理系統。

公交车上荫蒂添的好舒服的电影-公用玩物(np双xing总受)-公用小荡货芊芊-公与妇仑乱hd-攻把受做哭边走边肉楼梯play-古装一级淫片a免费播放口

🌌暗黑模式高效適配

濾鏡-反色

濾鏡-明度降低

蒙層遮罩

方式選擇推薦