Jumbotron Bootstrap 4 Image Opacity but Not Text

Question

I want to give the background image only in my jumbotron an opacity of 0.5. The problem is that the text in my jumbotron then also has a opacity of 0.5. How can I get the background only to have the opacity and not the text?

Here's the custom css file:

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

.jumbo_text {
    color: white;
}

Here's the 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>

Answer 1

You can do a small trick with linear-gradient when you set a solid color gradient (with opacity) over an image.

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