我最近收到一份错误报告，其中 svg 图标在高对比度模式下无法正确显示。在这篇文章中，我将分享对我有用的解决方案。
在高对比度模式下，我使用canvastext系统颜色来自动调整图标的颜色。
.icon {
mask-image: url(svg-link);
background-color: currentColor;
...
}
@media (forced-colors: active) {
.icon::before {
background-color: CanvasText;
}
}
就我而言，我最初使用 currentcolor 从父元素继承颜色。但是，在高对比度模式下，我想在子元素中将背景颜色普遍设置为 canvastext，所以我应用了此更改。
canvastext 是指用于应用程序内容或文档的文本颜色。它会自动调整以提供与系统背景颜色的最佳对比度。
通过使用 canvastext，您可以确保即使用户启用高对比度模式，文本和图标仍然可见。此外，由于 canvastext 根据系统主题进行自适应，因此它在深色和浅色模式下都能很好地工作。
就我而言，图标的背景颜色最初设置为黑色。然而，当背景在高对比度模式下变黑时，该图标就变得不可见。将颜色更改为白色使其再次可见，但为了在所有场景中一致地处理此问题，我选择使用系统颜色 canvastext。
https://developer.mozilla.org/en-us/docs/web/css/system-color
以上就是如何在高对比度模式下自动调整颜色的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1000
收藏
