SubDesarrollando

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.