Aplicar marca de agua con opacidad


Un efecto muy bonito y vistoso, que lo podemos usar para adornar una entrada o usarlo como pullquote o blockquote para resaltar alguna cita textual.
Bueno, para empezar diré que hay muchas formas de crear una marca de agua. En este caso, haremos una marca de agua usando opacidad, para que la imagen se vea como un fondo, como una marca de agua.

Lo único que tenemos que hacer es pegar el siguiente código en algún post o entrada:

<div style="width:300px;height:225px;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;background:url(AQUÍ-URL-DE-LA-IMAGEN)">
</div>
<p style="width:290px;text-align:justify;position:relative;top:-225px;color:black;">Aquí pones tu texto o algún enlace</p>

♠ No es necesario que la imagen sea ya casi transparente, sólo basta que pongamos la URL de la imagen a "todo color" y el script que les di se encargará del resto.

♠ También es muy importante que adecuemos el ancho y el alto con la imagen que usamos. Por ejemplo , si la imagen que vamos a usar mide 200x300 px, entonces cambiamos los valores width:300px;height:225px; por width:200px;height:300px; claro que deberemos de buscar una imagen no muy grande.

♠ Con top:-225px; podrás centrar el texto que pongas sobre la marca de agua.

Ahora un ejemplo:

» La imagen original:



» La misma imagen que con el script se convertirá en marca de agua:

Este es un ejemplo: aquí
pones tu texto o algún enlace

4 opinaron:

G

Muy bueno; y también muy sencillo de usar.

Besos

Responder
squirrel

Queda muy bonito; una pregunta, el texto que pongo dentro de la marca de agua puedo ponerle formato como color, negrita, etc?

Besitos :)

Responder
Yessmi

Me gustó mucho...Vaya estuve un tiempo ausente porque me fui de viaje y ahora que regreso veo que has publicado muchos post; me los voy a leer todos porque son muy buenos.

Un fuerte abrazo

Responder
Jéssica YK

» G: tienes razón .

» squirrel: sí,puedes aplicar negrita, cursiva, color, poner enlaces, etc.

» Yessmi: bienvenida nuevamente entonces y espero tenerte muy seguido :)

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio