为何设置全局背景图片会覆盖Bootstrap按钮的背景样式？

为什么会出现这个问题？ #

• 你用的全局通配符*会匹配页面所有元素，包括Bootstrap的.btn按钮。
• background是CSS简写属性，会一次性重置所有背景相关子属性（比如background-color、background-image等）。当你给*设置这个属性后，按钮原本的background-color（比如.btn-warning的黄色）被直接覆盖，换成了你指定的背景图，视觉上就像按钮“透明”了——本质是按钮背景被替换成了页面背景图。

怎么修复？ #

最合理的方案是把背景图应用到body元素上，而非全局通配符*：

body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background: url('assets/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

这么做的优势：

• body作为页面根容器，它的背景会自动成为整个页面的底色，不会干扰内部元素（比如按钮）的原有背景样式。
• 避免了全局通配符带来的样式污染，是CSS开发中更规范的写法。

如果有特殊需求必须使用*，至少别用简写的background属性，拆分后只设置背景图相关属性，保留元素原本的背景颜色，但这种方式不推荐，因为还是会给所有元素都加上背景图：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-image: url('assets/background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

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