background-image 看起来只是"给元素加张图"，但多层叠加顺序、路径相对谁解析、以及和 background-color 的绘制关系，这三点写错会直接导致图片不显示或布局错乱。本文依据 MDN 该属性页面的原文语法与示例整理。

一、MDN 给出的完整语法

MDN 的 background-image 页实测返回 200。其 Formal syntax 主干为 background-image = none | <image>，而 <image> 可展开为 url()、linear-gradient()、repeating-linear-gradient()、radial-gradient()、repeating-radial-gradient()、conic-gradient()、repeating-conic-gradient()，以及函数形式 image-set() 与 cross-fade()。官方示例直接给了三种典型写法：

background-image: url("/shared-assets/images/examples/lizard.png");
background-image: linear-gradient(black, white);
background-image: url("star-transparent.gif"), url("cat-front.png");

全局值 inherit / initial / revert / revert-layer / unset 均合法。想临时"关图"用 none，而不是删掉整条规则——这一点在做主题切换时很实用。

二、多层背景：第一个写在最上面

这是最容易搞反的一条。MDN 原文：\"background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.\" 也就是说，写在逗号最前面的那层在最上方。

因此渐变遮罩必须写在前面，否则会被图片完全盖住：

background-image: linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)), url("cat-front.png");

把两条 url 的顺序互换，效果就是两张图互相遮挡关系改变（官方 lizard.png 与 star.png 例子正是用来演示这一点）。多层还有个实用限制：background-color 永远画在所有背景图之下，所以不能用它当"最上层遮罩"。

三、路径相对谁解析：这是第一大坑

url() 里的相对路径是相对于该 CSS 文件本身的位置，而不是引用它的 HTML 页面。把样式从 /css/a.css 移到 /css/sub/b.css，原来能显示的图会全部 404。排查时不要怀疑图片，先看 Network 面板里请求的实际 URL。稳妥做法：站内资源统一用绝对路径 /images/xxx.png（以站点根为基准），或使用构建工具做路径重写。

四、与相邻属性的分工

• background-size：默认 auto 按原图尺寸，写 cover 会裁切、contain 会留白。
• background-repeat：多层写法可分别指定，如 background-repeat: no-repeat, repeat;，顺序必须与背景图层一一对应。
• background-position、background-attachment（fixed 在移动端 Safari 有兼容陷阱）。
• background-origin 与 background-clip：一个决定定位的参考盒，一个决定绘制裁切范围，border-box 下常被误认为"图片错位"。

五、image-set 做高清屏适配

MDN 语法中出现 image-set(<image-set-option>#)，选项可带 <percentage [0,100]> 或分辨率描述，浏览器按设备像素比自选资源，等价于为 CSS 图片写 srcset：

background-image: image-set(url(1x.png) 1x, url(2x.png) 2x);

老浏览器需在前面补一行 background-image: url(1x.png); 作为降级（写在前面会被后一行覆盖，符合层叠规则）。cross-fade() 则用于两张图按比例混合，常见于图标态切换。

六、常见问题 FAQ

问：写了 background-image 但完全没显示？
答：按顺序查：Network 是否 404（相对路径基准错）、元素是否有宽高（纯 inline 或高度为 0 不显示）、是否被 background-color 以外的上层遮挡、简写 background 是否把 image 重置为 none。

问：和 img 标签怎么选？
答：装饰性内容用 background-image（不进无障碍树、不参与 SEO），承载信息的内容必须用 img 并写 alt。

问：能引用外站图片吗？
答：可以，但受对方防盗链与站点 CSP 限制，生产环境应本地化。

七、总结

background-image 的要点是：语法上它接受 url、渐变族与 image-set、cross-fade；多层时逗号里第一个写在最上层，遮罩要放前面；路径相对 CSS 文件解析，跨目录迁移必查；与 size/repeat/position/origin/clip 的属性顺序必须一一对应；高清屏用 image-set 并保留降级行；临时关图用 none。而"图不见了"九成不是浏览器问题，是路径基准或元素高度为零。

• MDN
• css
• 前端
• background-image