0

sucede que quiero colocar opacidad a unas imágenes de un slider y no he podido, aquí les muestro como lo tengo.

introducir la descripción de la imagen aquí

Y quiero que quede algo así:

introducir la descripción de la imagen aquí

Según tengo entendido se utliza el Pseudo-elemento ::before, pero no me funciona, la imagen donde está la opacidad si me resulta ya que utilizo unas clases propias de Bootstrap para los div, pero, como este es un slider no funciona igual, ayudaa!!! Gracias

Este es el código html que utilizo:

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="assets/img/demo/7.jpg" class="d-block w-100 overlay overlay-blue" alt="...">
      <div class="carousel-caption">
        <h5>COMUNIDAD DE PAZ </h5>
      </div>
    </div>
    <div class="carousel-item">
      <img src="assets/img/demo/9.jpg" class="d-block w-100 overlay overlay-blue" alt="...">
      <div class="carousel-caption">
        <h5>IMPUNIDAD</h5>
      </div>
    </div>
    <div class="carousel-item">
      <img src="assets/img/demo/5.jpg" class="d-block w-100 overlay overlay-blue" alt="...">
      <div class="carousel-caption">
        <h5>NUESTRO TRABAJO</h5>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Y el CSS:

  .carousel-item {
 height: 100vh;
 min-height: 300px;
 background: no-repeat center center scroll;
 -webkit-background-size: cover;
 background-size: cover;
}

.carousel-caption {
 bottom: 243px;
}

@media (max-width: 768px) {
 .carousel-caption h5 {
     font-size: 28px!important;
 }
}
.carousel-caption h5 {
 font-size: 3.5rem;
 font-weight: 300;
 text-transform: uppercase;
 letter-spacing: 2px;
 margin-top: 2px;
}
2
  • Podrías usar la propiedad filter
    – 404
    Commented el 24 abr. 2020 a las 21:40
  • Charls utilicé uno de los ejemplos que me suministrastes y me sirvieron de mucho, muchas gracias Commented el 24 abr. 2020 a las 21:57

2 respuestas 2

0

Cambia la opacidad desde el elemento así:

img {
  opacity: 0.5; // Cuanto menor sea el valor mas transparente es la imagen. 
}

Aquí te amplían más la explicación https://www.w3schools.com/css/css_image_transparency.asp

0

hice un ejemplo de como podrías aplicarlo con ::before:

Explicación:

Hace referencia al elemento div con la clase .carousel-inner y a cada uno de sus hijos con el elemento div y que tengan la clase .carousel-item le aplica el pseudo-elemento ::before dentro de cada uno.

div.carousel-inner div.carousel-item::before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #2121218c;
    content: "";
}
1
  • Esta comunidad es excelente,utilice este ejemplo y también me sirvió para lo que necesitaba, ¡Muchas Gracias! Commented el 24 abr. 2020 a las 22:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.