HTML代码中picture适应暗黑与高对比度-html教程-PHP中文网

不能用同时响应prefers-color-scheme和prefers-contrast，因media属性不支持复合查询，应拆开处理：用专责明暗图切换，高对比度下靠css强化边框/轮廓/alt文本等可访问性结构。

html代码中picture适应暗黑与高对比度

picture 标签怎么同时适配 prefers-color-scheme 和 prefers-contrast

不能靠一个 <picture></picture> 同时响应两种媒体查询——media 属性只支持单个媒体条件，media="(prefers-color-scheme: dark) and (prefers-contrast: high)" 在绝大多数浏览器里不被识别（Chrome 125、Firefox 127、Safari 17.6 均不支持复合查询）。所以得拆开处理，优先级必须明确。

实际做法是：用 <picture></picture> 主力解决暗色/亮色切换，高对比度场景下不换图，而是靠 CSS 强化可访问性结构。因为高对比模式会清空背景、滤镜、渐变等视觉层，只保留 border/outlines/color，图像本身无法“变高对比”，只能确保它不被遮挡、不失焦、有足够边界。

深色图和浅色图用 <source media="(prefers-color-scheme: dark)"></source> 和 <source media="(prefers-color-scheme: light)"></source> 分开声明
不要给 <source></source> 加 prefers-contrast 条件——无效，且会让不支持的浏览器跳过整组 <source></source>
<img> 的 alt 必须准确描述图像内容，高对比模式下 screen reader 依赖这个，而不是视觉样式
如果真需要“高对比版图标”，应单独准备一套线性描边、无渐变、纯黑/白 SVG，并通过 JS 检测 window.matchMedia("(prefers-contrast: high)").matches 动态替换 src，但这是例外，不是 <picture></picture> 能承担的

高对比模式下 picture 里的 img 为什么看不见边框或焦点

不是 <picture></picture> 的问题，是系统强制重绘时剥离了大部分样式。高对比模式（尤其是 Windows 强制色彩主题）会把 background-color、box-shadow、filter 全部丢弃，只保留 border、outline、color 等极少数属性。而 <img> 默认没有 border，也没有 outline，所以一开高对比就“消失”在背景里。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

给 <img> 加 border: 2px solid currentColor 或 outline: 2px solid black，这两者在高对比下稳定生效
避免用 border-radius 或 box-shadow 做视觉区分——它们会被清空，反而造成样式断裂
如果 <img> 包在链接里，务必给 <a></a> 加 outline-offset: 2px，否则焦点框可能贴着图片边缘不可见
别指望 filter: brightness(0.8) 在高对比下起效——它属于被丢弃的属性之一

为什么 prefers-contrast 高对比切换后 picture 不自动重载图

因为 prefers-contrast 不触发 <picture></picture> 的源选择逻辑。浏览器只在初始渲染和 media 查询匹配状态变化时重新评估 <source></source>，而 prefers-contrast 的变更不会引起该评估。更关键的是：<picture></picture> 的设计目标从来不是响应高对比，它的语义是“为不同设备条件提供最优图像资源”，不是“为可访问性模式提供替代内容”。

window.matchMedia("(prefers-contrast: high)").addEventListener("change", ...) 可以监听到切换，但你得手动操作 DOM，比如替换 <img> 的 src 或切 class
若要兼顾，建议把高对比逻辑抽离：默认用 <picture></picture> 处理明暗，再用 JS 监听 prefers-contrast 并给外层容器加 data-contrast="high"，由 CSS 控制边框/文字/间距
注意 Safari 对 prefers-contrast 支持始于 13.1，旧版直接忽略，别让它成为功能主干
测试时别只看 Chrome —— Edge Legacy 和部分 Windows Chromium 会激活更激进的 forced-colors: active，行为比 prefers-contrast: high 更暴力

兼容性兜底：不支持 prefers-color-scheme 的浏览器怎么显示图片

所有现代浏览器（Chrome 76+、Firefox 67+、Safari 12.1+）都支持 prefers-color-scheme，但旧版 iOS Safari（12.0 及更早）、部分 Android WebView 仍会跳过全部 <source></source>，直取 <img>。所以 <img> 不是备胎，是底线。

<img src="logo-light.png"> 必须指向一个在任何环境下都可用的版本，通常是浅色图；不要设成占位符或空字符串
不要把深色图放最后——<source></source> 是从上到下匹配，第一个满足条件的生效，<img> 是最终 fallback，顺序不能乱
如果项目需支持 IE 或极老 WebView，<picture></picture> 本身会被忽略，整个标签退化为 <img>，此时更要确保 src 可用
srcset 和 sizes 可与暗色逻辑共存，例如 srcset="logo-dark@2x.png 2x"，但它们只管分辨率，不管主题