<picture> 标签不能实现背景图切换，它是内容型图像容器而非 CSS 背景机制的一部分；需用 background-image + 媒体查询实现响应式背景图，或用 <picture> + 定位模拟“视觉背景”，但本质仍是前景内容。

标签本身**不能实现背景图切换**，因为它不是 CSS 背景机制的一部分，而是用于替换 `` 的**内容型图像容器**。它不接受 `background-image`、`background-size` 等样式，也不能作为父元素的背景层使用。 如果你看到“用 picture 实现响应式背景图”的说法，通常存在概念混淆。下面分两种真实场景讲清楚：

想让某个容器拥有响应式背景图（比如首页横幅）

正确做法是纯 CSS：用 `background-image` 配合媒体查询切换 URL。

• 容器必须有明确高度（如 min-height: 100vh 或固定 height），否则背景不可见
• 每个 @media 块内重写 background-image: url(...)，路径需可访问
• 推荐加 background-size: cover; background-position: center; 防止变形或偏移
• 不依赖 JavaScript，浏览器原生支持，性能好

想让按钮/卡片里的图片“看起来像背景图”且响应式切换

这时可用 ``，但它是**覆盖在容器内部的内容图像**，不是真正意义上的背景图。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 把 `` 或 `
  ` 设为 position: relative

  内部嵌套 `` + ``，并设为 position: absolute; top: 0; left: 0; width: 100%; height: 100%

  <img> 加 object-fit: cover（裁剪适配）或 contain（完整显示）

  文字等子元素用 position: relative 和 z-index 确保在最上层

  为什么不用 background-image + media query 来做高阶响应？

  当需要按设备像素比（2x/3x）、MIME 类型（WebP fallback 到 PNG）、或不同宽高比（手机竖构图 vs 桌面横构图）切换时，CSS 的 `background-image` 就力不从心了。

  • background-image 不支持 srcset 语法
  • image-set() 兼容性差（仅 Safari 16.4+ 支持）
  • 无法为不同视口提供完全不同的图像内容（即 art direction）
  • 此时 `` 是唯一可靠方案——但它仍是前景内容，不是背景

  常见错误要避开

  • 给 `` 直接加 style="background: url(...)"; —— 完全无效，语义和功能都不匹配
  • 把 `` 写在 `` 后面 —— 浏览器忽略所有 ``，只加载 ``
  • `media="(max-width: 768px)"` 写在最前面，而后面还有更宽的断点 —— 浏览器不会继续判断，小屏永远命中第一条
  • 漏掉 `` 或没写 src 和 alt —— 部分浏览器不渲染，可访问性失败