如何修复引导程序不透明度？答案

【问题标题】：How can I fix bootstrap opacity?如何修复引导程序不透明度？
【发布时间】：2018-10-31 08:54:04
【问题描述】：

检查图片的侧面。我正在尝试使背景具有不透明度，而不会影响我放置的内容。（我不希望文本也有不透明度）但是问题始终是我的图片的侧面没有不透明度。

.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>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 opacity

【解决方案1】：

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

.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>

【讨论】：

【解决方案2】：

Bootstrap 4 支持您

只需添加这些类 h-100 将给你 height:100% 和 px-0 这会给你在 X 轴上的零填充

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

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

P.S 你也可以删除container，只要你不使用会破坏你溢出的row类（因为行有margin-left:-15px和margin-left:-15px）

【讨论】：

【解决方案3】：

如果你想使用 bootstrap 4 的特性，你必须关注它的规则。它的规则说container 必须包含row 并且row 必须包含col。在这种情况下，您的标记会如您所愿。

.container {
  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="row">
  <div class="background col">
    <h1 style="font-size: 350%;" class="text-center"><b>It's Lunch-Time!</b></h1>
  </div>
  </div>
</div>

【讨论】：