bloque_texto_imagen

Ya enseñamos hace tiempo a crear un rotador de imágenes con CSS, pero, ¿Y si solo deseamos ubicar texto encima de una imagen?
En esta entrada aprenderemos a insertar bloques de texto encima de una imagen.

Estructura

La imagen se ubica al fondo del todo, y, el bloque de texto está agrupado por un encabezado h2 (para indicar la posición) y una etiqueta dentro de este (para elegir el color, letra, tamaño de letra…). Para la imagen usaremos la posición relativa (“relative”) y para el encabezado usaremos la posición absoluta (“absolute”).

Código HTML – 1º parte

<div class="image">



 <h2><span>Floto encima de la imagen:<span>&amp;nbsp;</span><br /><span>&amp;nbsp;</span>Soy un fantasma</span></h2>
</div>

Código CSS – 1º parte

.image {

position: relative;

width: 100%; /* for IE 6 */

}

h2 {

position: absolute;

top: 200px;

left: 0;

width: 100%;

}

Con esto lograremos ubicar el texto encima de la imagen, a la izquierda, pero no crearemos la caja transparente negra que queremos insertar detrás del texto. Por eso no podemos usar el encabezado H2, es un elemento de bloque y necesitamos un elemento en línea sin un ancho específico.

Vamos a agrupar la etiqueta dentro del encabezado

:

Código HTML – 2º parte

<h2><span>Floto encima de la imagen:<br />Soy un fantasma</span></h2>

Ahora le daremos estilo a la etiqueta

Código CSS – 2º parte

h2 span {

color: white;

font: bold 24px/45px Helvetica, Sans-Serif;

letter-spacing: -1px;

background: rgb(0, 0, 0);

background: rgba(0, 0, 0, 0.7);

padding: 10px;

}

Ahora me preguntaréis. ¿Porqué uso dos fondos y en RGB? Para aplicar transparencia a la caja. el primer ‘background’ es para definir el color de la caja, y para definir la transparencia, se le añade otro ‘background’ con un valor adicional para indicar la transparencia que va de 0 (transparente) a 1 (opaco). Si deseamos aplicar esto en Internet Explorer, debemos utilizar un filtro y los comentarios condicionales:

<!-- &#91; if IE &#93;>

background: transparent;

filter: prodig:DXImageTransform.Microsoft.gradient(startcolorstr=#00000050,endcolorstr=#00000050;

zoom: 1;

< !&#91;endif&#93;-->

Un pequeño problema

Cuando un elemento en línea se rompe (
) el bloque se rompe después del último caracter en la línea, y se sitúa a la izquierda del todo en la siguiente línea. El padding no nos ayuda en este caso.

Para solucionar esto, aplicaremos etiquetas entre el elemento
para simular el padding. Debemos asignarle una clase a la etiqueta (le llamaremos “spacer”, por ejemplo):

Código HTML – 3º parte

<h2><span>Floto encima de la imagen:<span class='spacer'></span><br /><span class='spacer'></span>Soy un fantasma</span></h2>

Código CSS – 3º parte

h2 span.spacer {

padding:0 5px;

}

Arreglando la semántica

La etiqueta , en este caso, se está usando incorrectamente para su propósito y rompe la semántica.

JQuery puede ayudarnos. Elimina todas las etiquetas que hayas puesto, e inserta este código JS en tu documento:

$(function() {

$("h2")

.wrapInner("<span>")

$("h2 br")

.before("<span class='spacer'>")

.after("<span class='spacer'>");

});

Estandarización

CSS 2.1 inválido.
XHTML 1.0 Transitional inválido.

Ejemplo de su funcionamiento

Vía | CSS-Tricks