如何移除Bootstrap生成的白色条 实现透明导航栏悬浮叠加于背景图

• 浏览器会给<html>、<body>元素默认加8px的外边距，这是绝大多数新手做页面时出现顶部白边的根本原因
• 你给#header写的top: 100px因为没有配套的定位属性，完全不起作用；此时导航和背景图都在普通文档流里上下排列，只要两个块之间有哪怕几像素的边距差，就会露出body的白色底色，形成肉眼可见的白色条带
• 没有给导航设置脱离文档流的定位，根本实现不了悬浮叠在背景图上层的目标效果

• 第一步：先清掉浏览器默认的全局边距，从根源堵死白边的产生
  在你写的所有自定义CSS最开头，加上这段全局重置代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  background: transparent;
}

• 第二步：给导航补上正确的悬浮定位逻辑
  修改#header的CSS，补上之前缺失的定位属性，调整顶部对齐位置：

#header {
  background: rgba(12, 11, 9, 0.6);
  transition: all 0.5s;
  z-index: 997;
  /* 加固定定位，让导航脱离普通文档流，悬浮在页面上层 */
  position: fixed;
  top: 0; /* 把原来的top:100px删掉，让导航紧贴视口最顶端 */
  left: 0;
  width: 100%; /* 固定定位后必须手动撑满全宽，不然导航会收缩成内容的宽度 */
}

• 第三步：调整背景区的边距，确保背景从视口最顶端开始铺满
  修改#background的样式，消掉多余留白：

#background {
  width: 100%;
  height: 100vh;
  background: url(https://image.freepik.com/fotos-gratis/pranchas-de-madeira-com-fundo-borrado-restaurante_1253-56.jpg) top center;
  filter: brightness(30%);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  position: relative;
  /* 加margin:0，消掉块级元素默认的上下边距 */
  margin: 0;
}

• 第四步：清掉Bootstrap默认的导航冗余边距
  调整导航列表样式，覆盖框架自带的多余边距，避免移动端展开折叠菜单时出现白边：

.navbar .navbar-nav {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}
li a {
  color: white;
  font-size: 1.2rem;
  font-family: 'Inconsolata', monospace;
  font-weight: bold;
}
li a:hover {
  color: #759c4d;
}
ul, li {
  list-style-type: none;
}

• 改完后导航会完全悬浮在全屏背景图的顶部，两个元素紧密叠放没有空隙
• 滚动页面时导航会固定留在视口顶部，实现目标的透明悬浮效果
• 测试移动端模式，点击折叠按钮弹出的菜单不会被背景层挡住

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