2

Quiero aplicarle un color de fondo sobre la imagen, lo he intentado de la siguiente manera:

img::before {
  background: linear-gradient(to right, rgba(44,62,80, 7), rgba(44,62,80, 7));
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1000;
}

<div class="carousel-item active">
  <img class="d-block w-100" src="/img/games/bg.jpg" alt="" width="800" height="550" />
</div>

Pero no funciona, ¿Como podría resolverlo?

1
  • ¿Podrías poner también tu HTML?
    – Kiko_L
    Commented el 22 mar. 2019 a las 13:43

2 respuestas 2

3

La manera en que aplico yo los overlays es de la siguiente manera:

Envuelto todo en un contenedor cualquiera y aplico estos estilos:

.imagen::before {
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
}

.imagen {
  position: relative;
  display: inline-block;
}

Ejemplo

1
  • Muchas gracias, es justo lo que necesitaba xD Commented el 22 mar. 2019 a las 14:16
1

Ponle una clase, tal vez al div o a la sección ponle el

.section {   
   Background-color: #000;
 }

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.