如何修复 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

如果你想使用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>

Answer 2

Bootstrap 4 支持你

只需添加这些 classes 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 class 会破坏你的溢出（因为行有 margin-left:-15px 和 margin-left:-15px )

Answer 3

您应该使用 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>

如何修复 bootstrap 不透明度？

How can I fix bootstrap opacity?

html

css

opacity

twitter-bootstrap

bootstrap-4