Marca de agua en las imágenes con CSS

Una marca de agua es un logo dentro de una imagen la cual permite mostrar algún tipo de atribución en cada imagen. En esta oportunidad veremos cómo hacerlas sin necesidad de recurrir a modificar las imágenes.

El resultado será similar a este:

El tutorial:

¿Cómo Funciona?

Para insertar una marca de agua automática es necesario entender su forma de funcionar. Se inserta un contenedor con un color #000 (Negro) que contenga además la imagen con un texto blanco. Las imágenes no tendrán todas la opacidad (Por defecto un 90%) y por lo tanto se podrá apreciar la marca de agua. El color negro permite que la imagen se previsualice sin perder la opacidad inicial de ésta.


Paso 1: Añadiendo los estilos:

En "Diseño | Edición de HTML" deberás buscar el siguiente código:

]]></b:skin>

Arriba de este deberás pegar el siguiente:

.marca-de-agua {
    background: #000 url(URL-MARCA-DE-AGUA);
    width: 500px;
    height: 341px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.marca-de-agua img{
    padding:0;
    width:100%;
    height:100%;
    margin:0;
    filter:alpha(opacity=90);
    opacity:.90;
}

Guarda los cambios y listo.

Paso 2: Usando la marca de agua:

En "Edición de HTML" de la entrada, deberás pegar el siguiente código:

<div class="marca-de-agua" style="width:370px !important; height:278px !important;">
<img alt="" src="URL-IMAGEN" /></div>

Eso es todo.

Importante:

• Para cambiar el tamaño de la imagen es necesario modificar la del contenedor reemplazando los valores width y height destacados en el código anterior (La imagen toma el alto y ancho del contenedor, así evitamos que queden espacios en negro).
• Puedes tomar la imagen que utilicé como marca de agua como ejemplo para ajustar la distancia correctamente y no se vea la marca de agua muy repetida (Clic aquí).
• Si no deseas que la marca de agua se repita deberás editar el valor .marca-de-agua del primer paso de la siguiente forma:

.marca-de-agua {
    background: #000 url(URL-MARCA-DE-AGUA) no-repeat bottom right;

Con este código la marca de agua se mostrará en la esquina inferior derecha, puedes reemplazar bottom por top para que la imagen se muestre arriba; y right por left para que la imagen cambie de derecha a izquierda.