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 {Guarda los cambios y listo.
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;
}
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 {Con este código la marca de agua se mostrará en la esquina inferior derecha, puedes reemplazarbottom por top para que la imagen se muestre arriba; y right por left para que la imagen cambie de derecha a izquierda.
background: #000 url(URL-MARCA-DE-AGUA) no-repeat bottom right;
Gracias a Ayuda Blogger
Marcadores por: TuMundoBlogger
0 comentarios:
Publicar un comentario