介绍
我最近收到一份错误报告，其中 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 根据系统主题进行自适应，因此它在深色和浅色模式下都能很好地工作。
就我而言，图标的背景颜色最初设置为黑色。然而，当背景在高对比度模式下变黑时，该图标就变得不可见。将颜色更改为白色使其再次可见，但为了在所有场景中一致地处理此问题，我选择使用系统颜色 canvastext。
参考
https://developer.mozilla.org/en-us/docs/web/css/system-color
以上就是如何在高对比度模式下自动调整颜色的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2854176.html
