title: Darkening a background image on a bootstrap carousel
body: <p>I'm having trouble formatting my images to be darker in order to read the text on them. I'm using the bootstrap carousel theme and can't get the images darkes! Opacity works but it makes the text more transparent also. As far as I know the <code>linear-gradient</code> should be working but nothing is happening. I have tried it on all the classes (not just image class slide). </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slide {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="carousel-inner" role="listbox"&gt;
    &lt;div class="item active"&gt;
      &lt;img class="slide"  src="http://placehold.it/800x300" alt="First slide"&gt;
      &lt;div class="container"&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h1&gt;Welcome to GroupWrites.&lt;/h1&gt;
          &lt;p&gt;Where creative writing meets social media. Discover our community of writers and readers and experience social writing. &lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-lg btn-primary" href="/register" role="button"&gt;Sign up today&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>