html - 如何修复 Bootstrap 不透明度？

Question

检查图片的侧面。我试图使背景具有不透明度，而不影响我放在上面的内容。 (我也不希望文本具有不透明度)但自始至终的问题是我的图片的侧面不具有不透明度。

.container {
  position: relative;
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  height: 100vh;
  background: rgba(255,255,255,.4)
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="background">
    <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
</div>

Answer 1

您应该使用 d-flex、align-items-center 和 justify-content-center 而不是自定义 文本中心 样式。此外，不要将行的高度设置为固定数字:让它占据容器的整个高度。

.container {
  position: relative;
  background-image: url("https://www.elephantsdeli.com/wp-content/uploads/fly-images/1673/elephants-delicatessen-sack-lunch-order-form-hero-image.jpg-1920x1080.jpg");
  height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.background {
  background: rgba(255, 255, 255, .4)
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="container">
  <div class="row background h-100">
    <div class="col d-flex align-items-center justify-content-center">
      <h1 style="font-size: 350%;"><b>It's Lunch-Time!</b></h1>
    </div>
  </div>
</div>