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

【问题标题】：Jumbotron Bootstrap 4 Image Opacity but Not TextJumbotron Bootstrap 4 图像不透明度但不是文本
【发布时间】：2018-06-23 22:23:48
【问题描述】：

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

这是自定义 css 文件：

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

.jumbo_text {
    color: white;
}

这是 jumbotron 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>

【问题讨论】：

检查这个：stackoverflow.com/questions/15076471/…

标签： css bootstrap-4

【解决方案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>

【讨论】：

不错的方法