Jumbotron Bootstrap 4 图像不透明度但不是文本

Question

我只想在我的大屏幕中为背景图像提供 0.5 的不透明度。问题是我的大屏幕中的文本的不透明度也为 0.5。我怎样才能让背景只具有不透明度而不是文本？

这是自定义 css 文件：

.jumbotron{
opacity: 0.5;
background-image: url("../img/colorful_planke.jpg");
background-size: cover;
}

.jumbo_text {
    color: white;
}

这是超大屏幕 html

<div class="jumbotron jumbo_text">
    <h1 class="display-4 font-weight-bold text-center">Lorum Ipsom</h1><br>
    <p class="lead text-center font-weight-bold">Lorum Ipsom | Lorum Ipsom | Lorum Ipsom | Lorum Ipsom |
        Lorum Ipsom</p>
</div>

Answer 1

linear-gradient当您在图像上设置纯色渐变（不透明度）时，您可以做一个小技巧。

.jumbotron{
  opacity: 0.5;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
  background-size: cover;
}

.jumbo_text {
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron jumbo_text">
    <h1 class="display-4 font-weight-bold text-center">Lorum Ipsom</h1><br>
    <p class="lead text-center font-weight-bold">Lorum Ipsom | Lorum Ipsom | Lorum Ipsom | Lorum Ipsom |
        Lorum Ipsom</p>
</div>