title: Jumbotron Bootstrap 4 Image Opacity but Not Text
body: <p>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?</p>
  
  <p>Here's the custom css file:  </p>
  
  <pre><code>.jumbotron{
  opacity: 0.5;
  background-image: url("../img/colorful_planke.jpg");
  background-size: cover;
  }
  
  .jumbo_text {
      color: white;
  }
  </code></pre>
  
  <p>Here's the jumbotron html</p>
  
  <pre><code>&lt;div class="jumbotron jumbo_text"&gt;
      &lt;h1 class="display-4 font-weight-bold text-center"&gt;Lorum Ipsom&lt;/h1&gt;&lt;br&gt;
      &lt;p class="lead text-center font-weight-bold"&gt;Lorum Ipsom | Lorum Ipsom | Lorum Ipsom | Lorum Ipsom |
          Lorum Ipsom&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>