如何通过HTML实现多个背景图叠加及多重背景效果？

本文共计859个文字，预计阅读时间需要4分钟。

顶层图像必须写在最前面，否则视觉顺序会出错。例如，想让水印图标覆盖在主背景图上，应使用以下代码：

常见错误是把“主图”放前面、装饰图放后面，结果装饰图失效。浏览器渲染时严格按逗号顺序从前往后叠放，不看文件大小或命名逻辑。

• 第一项：最上层（如 SVG 图标、文字遮罩、半透明纹理）
• 第二项：中间层（如渐变、底纹、模糊 overlay）
• 第三项及以后：底层（如大图背景、平铺图案）

每个 background-* 属性都支持逗号分隔值

不能只写一个 background-position 就指望它适配所有图——除非你真想让所有图都居中。更常见的是每张图位置不同：background-position: top right, center, 20px 10px。

注意：如果某个属性（如 background-repeat）只写一个值，比如 no-repeat，那它会被复制应用到所有图层；但一旦写了多个，就必须数量匹配，否则整条声明会被浏览器忽略。