Buenas a todos!
Hoy traigo un poco de CSS, concretamente un problema que me trajo muchos dolores de cabeza pero que tiene fácil solución, lo suyo es encontrarla...
Definimos un DIV de fondo rojo y con opacidad 0.4:
<div style="background-color: red; opacity: 0.4;">
Y dentro ponemos una imagen.
src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/300px-PNG_transparency_demonstration_1.png" />
Puede que así nos resulte correcto dependiendo de lo que queramos hacer...
Pero en mi caso, quería que la imagen tuviera opacidad 1, mientras que el fondo permaneciera transparente.
Dado que la opacidad del DIV se aplica en todo su contenido, como podemos solventar este problema?
La respuesta es simple:
En el estilo del DIV, aplicamos la transparencia solamente en el fondo y no en el contenido del DIV, de esta forma:
<div style="background-color: rgba(255,0,0,0.4);">
La imagen se ve perfecta ahora y el fondo ha quedado transparente. Véase que hemos cambiado el nombre del color por su código RGB (red => 255,0,0) y hemos añadido el valor alpha (RGBA) para definir la transparencia del fondo.
Hoy traigo un poco de CSS, concretamente un problema que me trajo muchos dolores de cabeza pero que tiene fácil solución, lo suyo es encontrarla...
Definimos un DIV de fondo rojo y con opacidad 0.4:
<div style="background-color: red; opacity: 0.4;">
Y dentro ponemos una imagen.
src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/300px-PNG_transparency_demonstration_1.png" />
Puede que así nos resulte correcto dependiendo de lo que queramos hacer...
Pero en mi caso, quería que la imagen tuviera opacidad 1, mientras que el fondo permaneciera transparente.
Dado que la opacidad del DIV se aplica en todo su contenido, como podemos solventar este problema?
La respuesta es simple:
En el estilo del DIV, aplicamos la transparencia solamente en el fondo y no en el contenido del DIV, de esta forma:
<div style="background-color: rgba(255,0,0,0.4);">
La imagen se ve perfecta ahora y el fondo ha quedado transparente. Véase que hemos cambiado el nombre del color por su código RGB (red => 255,0,0) y hemos añadido el valor alpha (RGBA) para definir la transparencia del fondo.
Una vez publicado el post me he dado cuenta de que la imagen salia con un fondo gris; para quitar el fondo nada más que agregar en el tag de la imagen style="background: none;"
ResponderEliminaral fin una solución simple!!! llevo días buscando algo, pero todo es poner una imagen de fondo semitransparente o poner más capas o un código complicado tanto en el html como en el css... en fin, mil gracias!
ResponderEliminarBravo!! Por fín una solución con algo de lógica! :)
ResponderEliminarMuchas Gracias!