不能用作css背景图，因为它是语义化内容元素，参与文档流和无障碍访问，而background-image是纯装饰性css属性，不参与文档流；两者语义与渲染机制根本冲突。

标签不能用作 CSS 背景图 —— 它是语义化的内容型元素，只用于响应式**前景图片（ 替代方案）**，不是 background-image 的替代品。 浏览器不支持把 当背景插入、也不允许它参与层叠上下文中的“背景层级”。硬套进去只会导致布局错乱、SEO 污染、或根本无法渲染预期效果。 下面分几个真实开发中会撞上的点说清楚：

为什么 不能当 background-image 用

根本原因在于语义与渲染机制冲突： 是 HTML 内容元素，会生成可聚焦、可朗读、影响页面流的 box；而 background-image 是纯装饰性 CSS 属性，不参与文档流、不可交互、不触发无障碍访问。两者定位完全不同。

• 你写 <picture><source><img></source></picture>，浏览器把它当作一个“图片内容块”，默认 display: inline；想压到文字底下？得加 position: absolute + z-index，但这时它已脱离文档流，宽高需手动控制，且可能遮挡表单控件或点击区域
• background-image 支持 cover/contain、fixed 滚动行为、多背景叠加（逗号分隔）， 全都不支持
• 服务端渲染或 SSR 场景下， 会提前注入 DOM，但 background-image 可由 JS 动态切换路径或媒体查询控制，更灵活

想根据暗黑模式切图？用 media + background-image 就够了

不需要 。CSS 原生支持 @media (prefers-color-scheme: dark)，配合自定义属性或 :root 切换变量即可，更轻量、更可控。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 在 :root 中定义两套背景路径：--bg-light: url("/images/banner-light.jpg"); 和 --bg-dark: url("/images/banner-dark.jpg");
• 然后在 body 上写：background-image: var(--bg-light);，再用媒体查询覆盖：@media (prefers-color-scheme: dark) { body { background-image: var(--bg-dark); } }
• 如果要用 WebP 优先，可在 url() 里嵌套 image-set()（Chrome 120+ / Safari 17.4+ 支持）：background-image: image-set("banner-light.jpg" 1x, "banner-light.webp" 1x type("image/webp"));，但注意 fallback 兼容性

如果非要用 模拟“视觉背景”效果

仅限极少数场景：比如 banner 区域需要 SEO 友好、又必须响应式加载不同 DPR/尺寸图，同时上面还要叠加文字——这时应把 当内容放，再用绝对定位 + z-index 分层，而不是假装它是背景。

• 给容器（如 <div class="hero">）设 <code>position: relative;，确保定位上下文正确
• 放在容器最底层，加 position: absolute; top: 0; left: 0; width: 100%; height: 100%;，再加 object-fit: cover; 和 object-position: center;
• 文字层放在 后面，用 z-index: 2;，并确保有足够对比度（暗色图配浅字，反之亦然）
• ⚠️ 注意：这种写法会让 成为可聚焦元素（按 Tab 键会停驻），需加 aria-hidden="true" 和 tabindex="-1" 避免干扰辅助技术
真正容易被忽略的一点是：很多开发者看到 支持 media="(prefers-color-scheme: dark)" 就以为它能替代 CSS 媒体查询做背景切换，其实那是为 的 srcset 服务的——它决定“哪个图源该被下载和解码”，不改变渲染层级或样式行为。背景图的职责，始终在 CSS 手里。