如何用CSS/HTML让header背景图完美适配并消除留白（支持多背景图）

嘿，作为新手遇到这种布局问题太正常啦，我来帮你一步步搞定！

首先先指出你代码里的一个小语法错误：linear gradient应该写成linear-gradient（少了个连字符），不然这个渐变遮罩是不会生效的哦。

接下来，你看到的顶部和侧边留白，是因为浏览器给body元素默认设置了margin（通常是8px），这是浏览器自带的默认样式导致的。要消除它，我们只需要重置body的默认margin就行。另外，为了确保header本身没有额外的间距，也可以给header加上margin: 0; padding: 0;（不过大部分情况下header默认没有这些，但加上更保险）。

下面是修改后的完整CSS代码：

/* 重置body默认margin，消除全局留白 */
body {
  margin: 0;
}

header {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("background3.jpg");
  height: 100vh;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  /* 确保header自身无额外间距 */
  margin: 0;
  padding: 0;
}

关键说明： #

• body { margin: 0; }：这一步是核心，直接消除了浏览器默认给页面加的侧边和顶部留白。
• 修正后的linear-gradient：现在渐变遮罩会正常覆盖在背景图上，实现你想要的半透明暗色效果。
• background-size: cover和background-position: center top：这两个属性已经能保证背景图按比例铺满header区域，并且顶部对齐，完全符合你“向上铺满”的需求。
• 保留height: 100vh：让header占满整个视口高度，这样背景图自然就铺满了header的整个区域，不会出现局部显示的情况。

这样修改后，你的header背景图就能完美铺满，同时顶部和侧边的留白也会消失，而且完全不会影响你后续给其他元素设置不同背景图的需求~

内容的提问来源于stack exchange，提问作者V. Michelle