Poniendo una máscara a las imágenes con CSS

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:

Foto

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:

Mascara

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:

Fondo

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.

16 thoughts on “Poniendo una máscara a las imágenes con CSS

  1. Luis

    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. 😉

  2. ivan

    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

  3. Eseperio

    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!

  4. Jonatan

    Son Geniales! me mate buscando una solucion para hacer algo similar, y lo encontree aca y era de lo mas simple! mil gracias!

  5. alex

    Que tal, mencionas que es posible mover la imagen del fondo como se logra eso si afectar a la mascara?
    gracias salu2.

Leave a Reply

Your email address will not be published. Required fields are marked *