picture标签不能用作响应式背景图，因其是语义化内容容器，仅能替换img的src并渲染为前景dom元素；它不支持background-*类css属性，无法置于背景层，强行嵌套只是覆盖在背景上的图片。

HTML 本身不支持“响应式背景图”这个概念，所有可行方案都依赖 CSS；picture 标签完全不能用于背景图场景，强行嵌套只是叠在上面的前景图，不是背景。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

为什么 picture 标签不能当背景图用

picture 是语义化内容容器，设计目标是替换 img 的 src，最终渲染为一个可选中的、有尺寸的 DOM 元素。它： - 不接受任何 background- 开头的 CSS 属性（background-size、background-position 全部无效） - 无法通过 z-index 置于父容器背景层之下 - 常见错误写法：<div style="background: url(x.jpg)"><picture>...</picture></div>——这里 picture 和背景毫无关系，只是盖在背景上的一张图

真正有效的响应式背景图实现方式

核心逻辑是：**同一容器，在不同断点下，用媒体查询切换 background-image 的 URL 或缩放行为**。必须注意： - 容器要有明确高度（如 min-height: 100vh 或固定 height: 400px），否则背景不可见 - 每个 @media 块内需重写 background-image，路径必须真实可访问 - 推荐始终搭配 background-size: cover 和 background-position: center，避免拉伸或偏移

示例：

section.hero {
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media (max-width: 768px) {
  section.hero {
    background-image: url("./img/hero-mobile.jpg");
  }
}
@media (min-width: 769px) {
  section.hero {
    background-image: url("./img/hero-desktop.jpg");
  }
}

background-size: cover 和 contain 的实际差异

二者都保持原始宽高比，但裁剪逻辑完全不同： - cover：等比缩放至**完全覆盖容器**，可能裁剪图片边缘（适合 banner、首屏大图） - contain：等比缩放至**完整显示整张图**，容器内可能出现留白（适合 logo、图标类背景） - 避免用 100% 100%：强制拉伸，必然变形，除非图源本身就是完美适配比例

额外注意： - background-attachment: fixed 在移动端多数浏览器中被忽略或表现异常，慎用 - 如果背景图需要随滚动淡入，得靠 JS 监听 scroll + class 切换，CSS 无原生支持

容易被忽略的关键细节

很多页面背景图“失效”，其实不是代码写错，而是卡在这些地方： - 图片路径是本地绝对路径（如 c:\assets\bg.jpg），浏览器直接拒绝加载（必须用相对路径或 HTTP 服务） - 父容器没设高度，background-image 有值也看不见（空 div 默认高度为 0） - CSS 优先级被其他样式覆盖，比如某个全局 div { background: none !important; } 干掉了你的设置 - 使用了 WebP/AVIF 格式但没提供 fallback，旧版 Safari 或 IE 直接不显示

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！