via Intenta on 1/7/09
CSS Watermark es una forma sencilla de crear una marca de agua para nuestras imágenes. Se puede personalizar el lugar donde aparecerá la marca de agua: superior-izquierda (topleft), superior-derecha (topright), inferior-izquierda (bottomleft) e inferior-derecha (bottom-right).
Simplemente hay que incluir el CSS:
<link href="Watermark/Watermark.css" type="text/css" rel="stylesheet"></link>
y añadir el siguiente código cada vez que deseemos añadir una imagen con marca de agua:
<div class="watermark posicion"> <div class="text">Marca de agua</div> <img src="Nombre_Imagen.jpg" width="300" height="199" alt="alt imagen" > </div>
donde "posicion" puede tomar los valores: topleft, topright, bottomleft, bottomright.
Podemos modificar tanto el formato del texto, como la opacidad del mismo si modificamos la siguiente clase CSS incluida en el fichero Watermark.css:
div.watermark .text {
position: absolute;
cursor: default;
font: bold 22px Verdana, Arial, Sans-serif;
color: White;
margin: 4px;
line-height: 20px;
filter:
progid:
DXImageTransform.Microsoft.Alpha(opacity=50);
opacity: .5;
-moz-opacity: .5;
}
