Cómo instertar texto con opacidad encima de una imagen

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Con este truco podrás escribir cualquier palabra o frase encima de una imagen, y, además, podrás dar tanta opacidad a las letras como desees.

En esta imagen puedes ver el resultado:



Ten en cuenta que este truco puede resultar de bastante utilidad si lo que quieres es añadir una firma en alguna imagen, ya que además puedes cambiar el color del texto, el estilo de fuente, el grado de opacidad...

Para comenzar, sigue los siguientes pasos.

Abre la entrada en la que desees insertar la imagen y haz clic sobre la pestaña Edición de HTML:




Seguidamente pega este código:

<div style="width:300px; height:225px; background:transparent url(URL DE TU IMAGEN) repeat;"><h1 style="color: #cccccc; text-align: center; font-size: 28px; width: 100%; background:url(URL DE TU IMAGEN); filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70; padding-top: 4px; line-height:2em; ">FRASE O TEXTO</h1></div>

A continuación vamos a conocer el código, así como a cambiar diversos valores:

width:300px; es el grosor que tendrá la imagen. Cambia la cifra (300) por una que se ajuste al tamaño de tu imagen, de manera que ésta no se vea "aplastada".

height:300px; es al altura que tendrá la imagen. Cambia la cifra (300) por una que se ajuste al tamaño de tu imagen, de manera que ésta no se vea "estirada".

URL DE TU IMAGEN debe ser sustituido (en ambos casos) por la dirección de tu imagen. Si no sabes como obtener la URL lee esta entrada.

color: #cccccc; es el color del texto. Sustituye #cccccc por el código de cualquier otro color que encontrarás en la tabla de colores.

text-align: center; es la alineación del texto (en este caso estará centrado). Para alinearlo a la derecha cambia center por right y para alinearlo a la izquierda, cambia center por left.

font-size: 28px; es el tamaño del texto. Aumenta o disminuye las cifras (28) para cambiar el tamaño de las letras.

filter:alpha(opacity=70);-moz-opacity:.70;opacity:.70; es lo que dará opacidad al texto. Aumenta el valor (70) para disminuir la opacidad o disminuye el valor (70) para aumentar la opacidad.

FRASE O TEXTO es el espacio en el que debes insertar la firma, frase o palabra que llevará la imagen.

Haz clic en el botón Publicar entrada para finalizar con el truco: