title: bootstrap 4 beta carousel dark overlay
body: <p>I'm making use of the <a href="https://getbootstrap.com/docs/4.0/components/carousel/" rel="noreferrer">carousel control</a> of bootstrap v4.0.0-beta but I can't seem to get a dark transparent overlay over the images to create a nice contrast between the image a and the text.</p>
  
  <p>Anyway have any ideas.</p>
  
  <p>I've tried wrapper div classed for example:</p>
  
  <pre><code>.dark-overlay{
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top:0;
    left:0;
    width:100%;
    min-height: 250px;
  }
  </code></pre>
  
  <p>And then with the above-mentioned class wrap the image tags with:</p>
  
  <pre><code>&lt;div class="dark-overlay"&gt;
    &lt;img class="first-slide" src="#" alt="First slide"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I saw some solutions where the image is set as a background onto the slide, but I want to keep the carousel dynamic as I want to swop images out. Thus setting it as a background image is maybe not the best solution.</p>
  
  <p>Any help on how this can be solved would be appreciated.</p>