Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Insertar texto con opacidad encima de una imagen

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:

Maria Rosa dice...

Es un truco hermoso !!! Y sencillo!!

Gracias por compartirlo Jaime :D

Saludos :)

Jaime Trujillo Escobedo dice...

Maria Rosa, es estupéndo poder compartir este truquillo ;).

Me alegra que te haya gustado.

¡Saludos!

Gio dice...

Perfecto y utilísimo ;) gracias nuevamente

Jaime Trujillo Escobedo dice...

Gio! me alegra verte por aquí ;). Es maravilloso que te haya gustado.

Tutor dice...

Excelente no lo sabia

Jaime Trujillo Escobedo dice...

Tutor, me alegro entonces de habértelo dado a conocer ^_^.

Anónimo dice...

Y si la imagen estuviera en el pc, cual sería la instrucción?; gracias de antemano

Jaime Trujillo Escobedo dice...

Anónimo, en ese caso deberías subir la imagen a blogger y obtener su dirección para utilizarla en el código correspondiente.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo