Darkening a background image on a bootstrap carousel

Question

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 linear-gradient should be working but nothing is happening. I have tried it on all the classes (not just image class slide).

.slide {
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img class="slide"  src="http://placehold.it/800x300" alt="First slide">
    <div class="container">
      <div class="carousel-caption">
        <h1>Welcome to GroupWrites.</h1>
        <p>Where creative writing meets social media. Discover our community of writers and readers and experience social writing. </p>
        <p><a class="btn btn-lg btn-primary" href="/register" role="button">Sign up today</a></p>
      </div>
    </div>
  </div>
</div>

Answer 1

You set the background of the <img> element but this isn't working because the background is only visible in case the image is transparent or missing. You can use :after or :before to create a new overlay on top of the image with a semi transparent background using rgba.

You can use the pseudo-class on .item or .carousel-inner to darken the image without affecting the text.

.item:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.6);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <img class="slide" src="http://placehold.it/800x300" alt="first slide">
    <div class="container">
      <div class="carousel-caption">
        <h1>Welcome to GroupWrites.</h1>
        <p>Where creative writing meets social media. Discover our community of writers and readers and experience social writing.</p>
        <p><a class="btn btn-lg btn-primary" href="/register" role="button">Sign up today</a></p>
      </div>
    </div>
  </div>
</div>

Answer 2

Setting a background-image on an img will not work because, of course, the background image is in the background! It's covered up by the actual image.

What you need to do is overlay a semi-transparent background on top of your image. You can do this by setting a background for the image's parent div and ensuring it has a higher z-index than the image itself.

.item {
  width: 400px;
  height: 300px;
}
.item.active {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
}
.item .slide {
  position: relative;
  z-index: -1;
  width: 400px;
  height: 300px;
}

<div class="item">
  <img class="slide"  src="http://placehold.it/400x300" alt="First slide">
</div>
<div class="item active">
  <img class="slide"  src="http://placehold.it/400x300" alt="First slide">
</div>

Answer 3

you need to add this to your CSS

.carousel-caption{
  width:100%;
  height:100%;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,0.2);
}

Here is the JSfiddle link for the practical implementation. https://jsfiddle.net/ghayyourspyko/tc0ksnex/1/

Another way of doing it is as follow

.item{
Position:relative;
}
.item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.6);
}

JsFiddle link for the practical implementation of this is below. https://jsfiddle.net/ghayyourspyko/jscgdLdu/1/