Foros del Web - Ver Mensaje Individual - ¿Cómo puedo colocar texto dentro de una imagen?

emprear · #15 (**permalink**) 07/11/2012, 12:20

Cita:

Iniciado por Carlangueitor

Ponerla de fondo es más sencillo, pero no es semántico, siendo la imagen principal de un artículo en este caso.

Saludos

Supongo que haciendo de su contenedor un <figure> le daría la semántica necesaria, ya que dicho tag no se aplica necesariamente a un <img> y el figcaption encerraría al link

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
/*<![CDATA[*/
.img{
position: relative;
width: 220px; height: 135px;
padding: 0;
}
.texto{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
background: #000;
margin: 0;
padding: 0;
opacity: .7;
font: bold 11pt tahoma,sans-serif;
}
 
.texto a{
padding: 0 5px;
margin: 0;
display: block;
text-decoration: none;
color: #FFF;
}
 
/*]]>*/
</style>
</head>
<body>
<figure style="background-image: url(http://s1.vivirmexico.com/files/2012/11/Familia-Catrina-220x135.jpg)" class="img">
<figcaption class="texto"><a href="http://vivirmexico.com/2012/11/vivir-mexico-pool-dia-de-muertos?utm_source=self&amp;utm_medium=banner&amp;utm_campaign=Destacados%2BHome">Vivir México Pool: Especial de Día de Muertos</a></figcaption>
</figure>
</body>
</html>

Saludos