Cuando construimos un sitio, muchas veces por cuestiones de diseño queremos poner un marco a algunas imágenes. Cuando me refiero a marco, significa algo más que simplemente un borde con CSS, sino mas bién algo como esto:
El tema es que esto implica utilizar un software de edición de imágenes y ajustar el marco a cada una de las imágenes que utilicemos. Si bien para el diseñador esto no será un problema, al construir sitios dinámicos donde sea el usuario final quien suba las imágenes que el desee para un contenido particular, nos encontramos que probablemente esto sea una tarea técnica que esté mas allá de lo que nuestro cliente sepa y pueda hacer.
A continuación quiero mostrar una simple técnica de superponer una imagen sobre otra, de modo que el marco se monte sobre la otra imagen.
Primero necesitamos la imagen del marco con su interior transparente:
Este es un archivo PNG de 8 bits de profundidad de color, con transparencia de índice. Es decir, es lo mismo que un GIF. Recordemos que Internet Explorer hasta la versión 6 por lo menos, no soporta archivos PNG con canal Alfa, así que es importante que sea transparencia de índice.
Luego, necesitamos la imagen a la que pondremos el marco:
Esta puede ser cualquier imagen. Para el caso, he usado un GIF animado.
Finalmente, lo único que debemos hacer es poner una imagen de fondo de la otra, con CSS:
<img src="mascara.png" width="115" height="100" style="background-image:url(imagen.gif);" alt="texto" />
Lo que nos da el siguiente resultado:
Esto nos permite hacer que la imagen que el usuario suba, cualquiera sea, le sobreimpondremos el marco artístico. Al utilizar background-image, también si queremos podemos llegar a posicionar el fondo en un punto exacto detrás del marco, no necesariamente arriba a la izquierda.
15 Responses to Poniendo una máscara a las imágenes con CSS
mostofreddy August 14, 2006
Muy bueno tu tutorial…
Andaba buscando algo como esto desde hace tiempo
Saludos
Freddy
Luis September 19, 2006
Interesante! Es al revés de cómo se suele utilizar un marco: la imagen de background y el marco como imágen. Buena idea para adaptar thumbnails que pueden ser horizontales o verticales.
Lindo tu sitio, lástima que reserves tus trabajos a algunos pocos privilegiados.
martinez October 3, 2006
GRacias amigo, justo lo que buscaba “superponer gif transparente css” el 2º link en google !
Un saludo
SbS January 21, 2008
Un truco perfecto.
ivan March 24, 2008
hola… sabes como hacer un marco pero para un flash??’ … tengo un archivo flash y deseo ponerle marco… si lo sabes xfa pasame la vox .. gracias.. y excelente el tutorial
diseño web October 21, 2009
Muy bien, aplicaré esto a mi web
Juan January 24, 2010
Lo probare empezare a aplicarlo saludos
Nestor January 24, 2010
Interesante lo probare
pableitor December 7, 2010
Perfecto, justo lo que estaba buscando, gracias
Eseperio January 13, 2011
Ole! Y con esto desaparece el unico error de codigo que me daba el validador. Todo porque estaba usando la vieja funcion de definir el fondo de una celda.
Muchas gracias!
Exelente February 7, 2011
Excelente, ya lo aplique y esta genial
Jennifer Ayline March 26, 2011
Gracias me sirvió muchísimo el tip. =) Besos!!
Fabian May 14, 2011
No me funciona
nitus July 29, 2011
Buenismo, sale de 10!
Un abrazo grande y gracias!
Jonatan January 31, 2012
Son Geniales! me mate buscando una solucion para hacer algo similar, y lo encontree aca y era de lo mas simple! mil gracias!