Texto sobre imágenes (marcas de agua) con css

¿Cómo insertar marcas de agua en las imágenes utilizando CSS?

Vamos a ver una técnica sencilla para poner texto sobre imágenes con CSS a modo de marcas de agua.

La idea es poner un texto con la información que queramos sobre la imagen objetivo en la que queremos poner la marca de agua. El texto se puede sustituir por una imagen, por ejemplo con el logotipo de nuestra web.

El código CSS exacto utilizado puede ser muy variado y puede que necesite de pequeños ajustes para adaptarlo a tu web o necesidades concretas.

Ejemplo 1: Texto sobre imágen

Insertar texto como marca de agua sobre una imagen es muy fácil utilizando CSS. Toma el siguiente código HTML:

<div class="watermark">
    <img src="http://www.bloogie.es/media/usuarios/44/watermark_css_1.jpg" />
    <div class="texto">&copy; geishaboy500 (Flickr)</div>
</div>

Y aplica este código CSS:

<style>
.watermark {
}
.texto {
  position: relative;
  top: -20px;
}
</style>

Así conseguimos:

Por supuesto, puedes aplicar otras muchas reglas de estilo al texto, a la imagen, o a ambos para conseguir el efecto que desees. Por ejemplo:

<style>
.watermark {
    border: 1px solid #CCCCCC;
    float: left;
    padding: 5px;
}
.texto {
    color: #777777;
    font-family: Lucida Grande;
    font-style: italic;
    margin: 5px 5px -25px 10px;
    position: relative;
    text-align: right;
    top: -30px;
}
</style>

El efecto conseguido será algo más elegante:

Ejemplo 2: imágen sobre imágen

Si queremos introducir nuestro logotipo como watermark en una imagen podemos hacer algo parecido a la técnica anterior pero utilizando la imagen de nuestro logotipo en lugar del texto. Con CSS pondremos la imagen del logotipo para que se muestre sobre la otra imagen a modo de marca de agua.

<div class="watermark">
    <img src="http://www.dominio.com/imagen.png" />
    <div class="logo"><img src="http://www.dominio.com/logo.png" /></div>
</div>

Con el siguiente CSS:

<style>
.watermark {
    border: 1px solid #CCCCCC;
    float: left;
    padding: 5px;
}
.logo {
    margin: 5px 5px -75px;
    position: relative;
    text-align: right;
    top: -80px;
}
.logo img {
   opacity: 0.5;
}
</style>

En el código anterior tendrías que ajustar sobre todo el top y margin de la clase logo según la altura de la imagen de tu logotipo y la posición que desees del mismo. Se obtendrá algo así (sé que el ejemplo el feo, pero cumple la función ilustrativa, ¿no?)

Ventajas e inconvenientes de poner marcas de agua con CSS

Las ventajas principales son:

• La imagen original se mantiene inalterada y, por tanto, no hay necesidad de mantener dos copias, una con marca de agua y otra sin ella.
• Si cambias de logotipo puedes actualizar la marca de agua de todas las imágenes de tu sitio con un clic, tan sólo reemplazando la imagen de tu logotipo antiguo por el nuevo, si mantienes el nombre del archivo del logotipo se actualizará la marca de agua de todas las imágenes de tu sitio.

Pero presenta un inconveniente importante:

• La información contenida en la marca de agua no se mantiene si alguien se descarga la imagen de tu web o la copia. Esto se podría solventa utilizando los metadatos de la imagen (vea como poner metadados con photoshop).

Descárgate el ejemplo de marcas de agua con CSS