如何修复Bootstrap背景透明度问题？让背景透明不影响内容且覆盖图片两侧

咱们先拆解下你当前代码里的核心问题：

• 你用了 Bootstrap 默认的 .container 类，它是固定宽度且带左右内边距的，所以背景图只会在这个窄容器里显示，两侧自然没有透明度效果；
• .background 设了 100vh 高度，但它是 .container 的子元素，高度超出父容器的 50vh，布局逻辑也不符合全屏背景的需求；
• 虽然文本没继承透明度，但背景范围被死死限制在 .container 里，导致两侧出现空白。

下面给你一套更合理的解决方案，用伪元素实现独立背景层，既能让背景全屏覆盖，又能彻底隔离透明度对文本的影响：

修正后的完整代码 #

CSS 样式 #

/* 替换原有容器样式，做全屏背景容器 */
.full-bg-container {
  position: relative;
  min-height: 100vh; /* 占满整个视口高度 */
  width: 100%; /* 确保宽度全屏无空白 */
}

/* 用伪元素单独承载背景图和透明度 */
.full-bg-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.4; /* 这里直接控制背景的透明度 */
  z-index: -1; /* 把背景层压到文本下方 */
}

.text-center {
  padding: 50px 0;
}

HTML 结构 #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="full-bg-container">
  <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
</div>

方案为什么能解决问题？ #

• 伪元素是容器的独立层级，透明度只作用在背景图上，完全不会影响内部的文本；
• 容器设为全屏宽高，背景图能覆盖整个视口，两侧再也不会出现空白；
• z-index: -1 把背景层放到文本下方，保证文字清晰显示在最上层。

这样调整后，就能实现你想要的「背景半透明、文本完全不透明」的全屏效果啦～

内容的提问来源于stack exchange，提问作者Alejandro Carvajal Sarria