CSS设置背景色后背景图出现平铺现象的原因是什么？

问题原因 #

该现象由CSS background 简写属性的默认重置特性导致：

• 仅设置background-image: url("image.jpg")时，你之前针对该元素写的其他背景配置（比如background-repeat: no-repeat、background-size: cover这类控制图片不重复、铺满容器的属性）会正常生效，因此背景图呈现单张完整覆盖的效果。
• 新增background: black配置时，background作为简写属性，会先将所有背景相关属性重置为浏览器默认初始值，再赋值你指定的背景色参数：
  • 背景相关属性的默认值中，background-repeat为repeat（即默认平铺），background-size为auto（使用图片原始尺寸），你后续仅单独补充了background-image配置，没有重新覆盖background-repeat、background-size这些被重置的属性，因此就会出现图片平铺的效果。

调整方案 #

如果需要同时设置背景色和背景图，可选择两种写法避免异常：

• 单独设置背景色属性，不使用简写，就不会触发其他背景属性重置：

  .module-36 {
    background-color: black;
    background-image: url("image.jpg");
    /* 其余原有背景配置会正常生效 */
  }
  

• 所有背景参数都通过background简写一次性声明：

  .module-36 {
    /* 顺序为：背景色 背景图 重复规则 定位/尺寸 */
    background: black url("image.jpg") no-repeat center/cover;
  }
  

内容的提问来源于stack exchange，提问作者Tai