Bootstrap4环境下如何实现页面居中条纹背景？CSS body样式疑问

嗨，我明白你想实现的效果——页面中间一条固定宽度的背景条纹，两边是另一种颜色，而且不想把所有内容都塞进特定容器里对吧？直接给body设置width和background-color没用是有原因的，我来给你拆解下，再给你几个靠谱的解决方案，包括用Bootstrap 4的实现方式～

为什么直接设置body的width无效？ #

body作为页面的根容器，浏览器默认会把它的背景色延伸到整个视口，哪怕你给body设置了width，背景色还是会铺满整个页面——这是CSS背景渲染的特殊规则，根元素（html/body）的背景会被当作视口背景来处理，所以直接设置body的宽度约束不住背景范围。

解决方案1：用CSS伪元素实现（无需额外容器） #

这是最简洁的方法，不用添加任何额外HTML元素，直接通过body的伪元素创建中间的背景条纹：

/* 页面默认背景色（两边的黑色） */
body {
  margin: 0; /* 去掉默认边距 */
  background-color: #000;
}

/* 中间的灰色条纹 */
body::before {
  content: ''; /* 伪元素必须的属性 */
  position: fixed; /* 固定定位，滚动时条纹保持不动 */
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 水平居中，比margin:auto更可靠 */
  width: 70%; /* 你要的条纹宽度 */
  height: 100vh; /* 占满整个视口高度 */
  background-color: rgb(128,128,128);
  z-index: -1; /* 把条纹放在所有内容下方，避免遮挡 */
}

这个方法的好处是完全不影响页面结构，所有内容正常放在body里就行，条纹会一直固定在页面中间。

解决方案2：用Bootstrap 4实现 #

如果你想利用Bootstrap的工具类，可以这么做：

1. 先自定义一个宽度类（因为Bootstrap默认没有70%宽度的类）：

.w-70 {
  width: 70% !important;
}

2. 在HTML里添加一个单独的背景元素，用Bootstrap的定位和对齐类：

<body>
  <!-- 中间的背景条纹 -->
  <div class="position-fixed top-0 left-0 right-0 mx-auto w-70 h-100" style="z-index: -1; background-color: rgb(128,128,128);"></div>
  
  <!-- 你的页面内容，比如Bootstrap的容器 -->
  <div class="container">
    <!-- 内容写在这里 -->
  </div>
</body>

解释一下这些类：

• position-fixed：让条纹固定在视口，不随滚动移动
• top-0 left-0 right-0：配合mx-auto实现水平居中
• w-70：自定义的70%宽度
• h-100：占满视口高度
• z-index: -1：把条纹放在内容下方，避免遮挡页面元素

关于你原来的.centerBG类 #

你那个类之所以需要把内容都放进去，是因为它是一个容器元素，背景色只作用在容器本身，所以内容必须在容器内才能看到中间的背景。而上面的两种方法都是把背景条纹作为独立的“底层元素”，不需要包裹内容，使用起来更灵活。

这样应该就解决你的问题啦，两种方法都能实现你要的效果，看你更喜欢哪种～

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