Muy buenos días, he intentado hacer que la imagen del slider tenga una opacidad como la siguiente imagen que adjunto:
Aclaro que la imagen mostrada no es un slider, es un elemento div , a lo que voy es que quiero que el slider tenga esa opacidad. El código que tengo es el siguiente:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="container">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/banner.jpg" alt="Slider Image">
<div class="container">
<div class="carousel-centered">
<div class="margin-b-40">
<h1 class="carousel-title">Hi-Tech Design</h1>
<p>Lorem ipsum dolor amet consectetur adipiscing dolore magna aliqua <br/> enim minim estudiat veniam siad venumus dolore</p>
</div>
<a href="#" class="btn-theme btn-theme-sm btn-white-brd text-uppercase">Explore</a>
</div>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/banner2.jpg" alt="Slider Image">
<div class="container">
<div class="carousel-centered">
<div class="margin-b-40">
<h2 class="carousel-title">Hi-Tech Design</h2>
<p>Lorem ipsum dolor amet consectetur adipiscing dolore magna aliqua <br/> enim minim estudiat veniam siad venumus dolore</p>
</div>
<a href="#" class="btn-theme btn-theme-sm btn-white-brd text-uppercase">Explore</a>
</div>
</div>
</div>
</div>
</div>
Mi resultado adjunto la imagen:
Como pueden darse cuenta, las imágenes no tienen esa opacidad que necesito hacer, he intentado con CSS3: opacity; pero tampoco se opacan las imágenes; ¿alguien podría orientarme de cómo resolverlo? Estoy utilizando la librería Bootstrap 3. NOTA: Soy nuevo en CSS3 y JavaScript no tengo mucho conocimiento al respecto.