装饰性图片应使用css background-image实现，或用标签配alt=""和aria-hidden="true"；禁用title、aria-label等属性，确保不干扰辅助技术且语义清晰。
装饰性图片不该出现在 HTML 结构里，也不该干扰辅助技术。最直接的判断标准是：删掉它，页面信息是否完整？如果答案是肯定的，那就必须走 CSS 背景路线，或者用 <img> + alt="" 组合，不能含糊。
用 background-image 替代 ![]()
是首选方案
这是语义最干净、可访问性最强的做法。图片不参与 DOM 流程，屏幕阅读器完全忽略，SEO 也不会误抓“无意义”的图片资源。
- 必须确保容器有明确宽高（
width/height或padding-bottom），否则背景图不渲染 -
background-size: cover和contain行为差异大：cover可能裁边，contain必留白，别靠猜，要实测 - 路径写错时浏览器静默失败——检查 DevTools 的 Network 标签页里有没有 404，别只看元素面板里的样式声明
- 如果图片需响应式切换（比如深色模式换图），CSS 中用
@media (prefers-color-scheme: dark)+background-image覆盖更稳，比 JS 切换 class 更轻量
![]()
标签加 alt="" 不等于万事大吉
有些 CMS 或编辑器强制走 <img>，这时 alt="" 是底线，但光这样还不够。
- 必须同时加
aria-hidden="true"——部分旧版读屏软件对空alt处理不一致，双保险更可靠 - 绝对不要加
title属性，它会在鼠标悬停时弹出冗余提示，对键盘用户还会触发焦点提示，纯属干扰 - 禁止用
aria-label或aria-labelledby，哪怕值为空字符串，都会被某些读屏器当作有效标签播报 - 如果这张图在链接内（比如
@#@#@#@#@#@#@#@#@#@0），务必确认链接本身有可访问文本，否则整个链接会变成“空操作”
background-image 与 
的性能和加载行为差异
两者底层加载机制不同，影响首屏速度和 LCP 指标。
- CSS 背景图不阻塞 HTML 解析，但也不支持
loading="lazy"，滚动进视口前就已下载；<img>支持懒加载，适合长页面底部的装饰图 - 背景图无法用
srcset响应式提供多分辨率，高清屏下可能模糊；<img>可配srcset+sizes精准匹配设备像素比 - WebP/AVIF 等现代格式在
<img>中可通过<picture></picture>回退，CSS 背景目前只能靠服务器协商（Accept头）或 JS 动态插入，兼容成本高 - 如果装饰图需要动画（比如飘动的雪花），用
<img>+ CSStransform比背景图 +background-position动画更易控制帧率
真正容易被忽略的是语义边界：一张图到底是“装饰”还是“内容”，有时取决于上下文。比如 banner 上的渐变蒙层，单独看是装饰，但如果它承载了文字对比度保障功能，就得重新评估。别只看设计稿，得结合文案、交互逻辑和无障碍测试一起判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
