Marca de agua en las imágenes con CSS

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.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger