bem修饰符不能响应dpr切换背景图，因其仅控制样式而非资源请求；应使用媒体查询配合background-image覆盖和background-size防失真，同时用修饰符管理语义化背景变体。
background-image 不能用 BEM 修饰符切换分辨率
BEM 修饰符（如 banner--retina）不适用于按设备像素比（DPR）切换背景图——因为 background-image 是 CSS 属性，不是 DOM 状态，浏览器不会根据类名动态加载或替换图片资源。它只控制样式呈现，不触发资源请求逻辑。
常见错误现象：div.banner.banner--retina 被加上后，开发者以为会自动加载 bg@2x.jpg，结果发现图片还是原始 URL，甚至因未显式重写 background-image 导致样式丢失。
- 修饰符必须配合显式的 CSS 声明才生效，比如
.banner--retina { background-image: url('bg@2x.jpg'); } - 但这样写无法响应 DPR 变化：用户旋转 iPad 或缩放页面时，类名不会自动增删，
--retina不是运行时检测机制 - Firefox 完全不支持
image-set()，而 BEM 修饰符 + 手动切图更难维护、无法 fallback
真正该用 media query 的地方：-webkit-min-device-pixel-ratio
如果确实要为高 DPR 设备提供不同背景图，唯一可靠且被广泛支持的方式是媒体查询 + background-image 覆盖，配合 background-size 防止拉伸失真。
- 必须写在基础声明之后，否则会被忽略：
body { background-image: url('bg.jpg'); }→ 再写@media (-webkit-min-device-pixel-ratio: 2) { body { background-image: url('bg@2x.jpg'); background-size: contain; } } - 注意 Safari/Chrome 支持
-webkit-min-device-pixel-ratio，但标准语法resolution: 2dppx兼容性差，不推荐 - 别忘了加
background-size：高清图若没设background-size: cover或具体值，可能被压缩或裁剪
BEM 修饰符适合管理「语义化背景变体」，不是分辨率
你可以用 BEM 修饰符区分背景图的用途或视觉意图，比如 hero--feature、hero--promo、hero--error，每个对应预设好的图、色、尺寸组合——这才是 BEM 的设计本意。
- 示例：
.hero--feature { background-image: url('/img/feature-bg.jpg'); background-color: #0a192f; } - 修饰符必须绑定块名：
hero--feature合法，--feature孤立类名会污染全局、无法定位作用域 - 多个修饰符可叠加：
hero hero--feature hero--dark，但禁止嵌套如hero--feature-dark，语义模糊且不可组合 - 所有修饰符定义必须收口在同一份 CSS 文件中，避免不同主题文件里同名修饰符互相覆盖
容易被忽略的路径与加载问题
无论用 media query 还是 BEM 修饰符，background-image 的 URL 都是相对当前 CSS 文件位置解析的，不是 HTML 页面路径——这点出错率极高。
- 检查开发者工具「Computed」面板里的
background-image值，点开链接看是否 404 - 如果用了构建工具（如 Vite/Webpack），确保图片在
public/下或已正确import，否则打包后路径失效 - 始终加
background-color降级：background: #e0e0e0 url('...') no-repeat center / cover;，防止图片加载失败时白屏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
