不能直接给 hr 标签设置图片背景或内容，因其默认 border 会遮挡 background-image，且作为空元素不支持嵌套 img；语义上 hr 表示主题分隔，用图片会损害可访问性和 SEO，应改用 div+img 或 CSS background 的语义中立方案。

hr 标签本身不支持直接设置图片作为背景或内容——浏览器会忽略 src、alt 等属性，也不能用 background-image 且保留语义（除非你先清掉默认样式并手动重绘）。想用图片当分割线，本质是“放弃 hr 的语义”，改用其他元素承载图片。

为什么不能直接给 hr 加 background-image

因为 hr 默认有 border，而多数浏览器对 hr 的渲染逻辑是：先画 border，再叠 background。如果你只写 background-image 不清 border，图片会被遮挡或根本不可见；即使清了 border，部分旧版 Safari 或 IE 仍可能忽略 background 渲染。

• 必须显式设置 border: none 和 height: auto（或具体值）才能让 background 生效
• hr 是空元素，无法嵌套 img，所以

  ---

  是无效 HTML
• 语义上，hr 表示“主题分隔”，不是“装饰性图片”，混用会损害可访问性和 SEO

用 img 替代 hr 的实际写法

最稳妥的方式是换一个语义中立的容器，比如 div 或 span，然后插入 img 标签。这样图片能正常加载、缩放、响应式控制，也便于后期替换。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 推荐结构：
  
• 必须加 alt 属性，哪怕为空（alt=""），否则屏幕阅读器会读出文件名，影响体验
• 图片建议用 SVG：体积小、缩放无损、可内联或 CSS 控制颜色（通过 fill）
• 若用 PNG/JPG，记得设 width: 100% 和 height: auto 防止拉伸变形

用 CSS background-image 模拟图片分割线（不用 img 标签）

如果图像是纯装饰、无需 alt、也不需被爬虫索引，更轻量的做法是用块级元素 + background：

• 结构：
• CSS 示例：

  `.custom-divider {
    height: 24px;
    background: url('wave.svg') center / contain no-repeat;
    margin: 20px 0;
  }`

• 注意：SVG 路径要相对正确；若用 base64 编码，可避免额外请求
• 缺点：无法为图片设置独立的 loading 状态或 fallback 图片（CSS background 不支持 onerror）

真正难的不是“怎么塞张图进去”，而是决定它该不该是 hr——语义错位比样式难调得多。一旦用了图片，就别再指望它还能被当成“主题分隔”被解析器或辅助工具识别。

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