1

Tengo un tag <img>con un tamaño definido, no importa el tamaño de la imagen que se le cargue, ahora necesito agregarle una capa de color semitransparente sobre este <img> le cargo de la siguiente manera, pero el color no se sobrepone en la imagen, alguna idea de como pueda agregarle un color de fondo?

HTML

<div class="imgCat" style=" ">
   <img src="imagen.jpg" style="height: 200px; width: 293px; background-color:rgba(102,255,255,0.5)">
   <div class="row categorias-experience">
       <div class="nombre-categoria centered">Gourmet</div>
   </div>                           
</div>

2 respuestas 2

2

podrias poner un fondo al div que contiene la imagen y utilizar el atributo css: opacity en la foto

ejemplo :

img{
  height: 200px;
  width: 293px;
  opacity: 0.4;
}
.contenedor-img{
  background: white;
  height: 200px;
  width: 293px;
}
<div class="imgCat" style=" ">
  <div class="contenedor-img">
    <img src="https://www.pcactual.com/medio/2018/09/16/imagen-a-jpg_6929b44b.jpg" >
  </div>
    <div class="row categorias-experience">
      <div class="nombre-categoria centered">Gourmet</div>
    </div>                           
</div>

el opacity funciona como el canal Alfa del RGBA osea va de 0 a 1, espero te sea de ayuda, exitos

1
  • Gracias me funciono! Commented el 11 ene. 2019 a las 16:32
0

Simplemente lo puedes hacer con la pseudoclase de css ::before que le añade una capa con propiedades aparte de la principal. Existe tambien ::after, par ejecutar el ejemplo aqui en stackoverflow, tem paciencia que la imagen se demora en cargar, puede tambien copiar el codigo html y css en un archivo local y se ejecutara mas rapido.

	.superimagen {
position: relative;
width: 100px;
height: 100px;
color: white;
font-size: 30px;
background:#00ff4866;
}
.superimagen:before {
position: absolute;
top:0;
left:0;
content: " ";
background: url("http://lorempixel.com/400/200");
background-size: 100% 100%;
width: 100px;
height: 100px;
float: left;
z-index:-1;
}
<div class="superimagen"></div>

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.