¿Cómo puedo colocar texto dentro de una imagen?

alvarols · #1 (**permalink**) 06/11/2012, 12:06

Estoy haciendo un blog en Wordpress y quiero emular esto, donde dentro de las imágenes destacadas ponen el título del artículo:

http://vivirmexico.com/

Quisiera ver como se puede hacer eso con CSS

Gracias

Carlangueitor · #2 (**permalink**) 06/11/2012, 12:21

Puedes ver el código que usan ahí para darte una idea de como hacerlo. Y hay herramientas para hacerlo más fácil, como Firebug y las herramientas de desarrollador de Chrome.

BTW, la manera más sencilla es meter todo en un contenedor, le das posición relativa y al texto posición absoluta, luego lo acomodas.

Saludos

lolin_83 · #3 (**permalink**) 06/11/2012, 12:24

Otra opcion es que la imagen la pongas como un background y le podras escribir por encima de ella lo que quieras

Un saludo

alvarols · #4 (**permalink**) 06/11/2012, 12:59

Ya pude hacerlo. Lo que hago es subir la capa de texto así:

position: relative;
top:-120px;

El problema es que debajo de imagen queda un espacio de la capa (siendo que ya la subí) ¿Cómo la quito?

memoadian · #5 (**permalink**) 06/11/2012, 13:04

intenta poniendo line-height:0 a la imagen o capa donde esté.

alvarols · #6 (**permalink**) 06/11/2012, 13:09

No, no es eso, el hueco es del tamaño de la capa.

alvarols · #7 (**permalink**) 06/11/2012, 13:20

Así se ve

memoadian · #8 (**permalink**) 06/11/2012, 13:25

l estás poniendo un height, si la imagen mide menos, la capa evidentemente tomará un espacio extra y la capa no ocupará todo el alto.

alvarols · #9 (**permalink**) 06/11/2012, 13:41

Código CSS:

Ver original.thumbnail2{
    position:relative;
    width:100%;
    margin:0 auto;
}
 
.thumbnail2 img{
    width:100%;
}
 
.thumbnail2 h1{
    display:block;
    position:relative;
    top:-120px;
    left: 0;
    padding-left:5px;
        background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
        
 
}
 
.thumbnail2 h1 span{
    font: bold 40px;
    letter-spacing: -1px;
    line-height:54px;
}
 
 
.thumbnail2 h1 a{
    color:#FFF;
 
 
}

memoadian · #10 (**permalink**) 06/11/2012, 13:52

¿es posible que veamos el site online?

alvarols · #11 (**permalink**) 06/11/2012, 13:55

Noup, porque está todo en localhost :(

pzin · #12 (**permalink**) 07/11/2012, 07:24

¿Por qué no haces como te dijeron en #2? Es menos engorroso y un tanto más elegante.

emprear · #13 (**permalink**) 07/11/2012, 10:07

hacerlo con una imagen de fondo como te indicaron es mucho más sencillo

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>
<div style="background-image: url(http://s1.vivirmexico.com/files/2012/11/Familia-Catrina-220x135.jpg)" class="img">
<div 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></div>
</div>
</body>
</html>

Saludos

Carlangueitor · #14 (**permalink**) 07/11/2012, 12:04

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

Saludos

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

C2am · #16 (**permalink**) 07/11/2012, 12:26

Yo voto por la #2.
El espacio en blanco al poner position:relative y luego moverla de su lugar con top, es que para los demás elementos es como si siguiera en su sitio.
Por eso es mejor la opción es position:absolute (creo que es la primera vez que la recomiendo expresamente)

Saludos

pitufoweb · #17 (**permalink**) 07/11/2012, 20:15

Cita:

Iniciado por emprear

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

Lo que quiere decir Carlangueitor es que las imágenes que forman parte del contenido tienen que estar dentro del html. En el CSS solo tendrían que ir imágenes decorativas, etc.

Por ejemplo; Si pones la imagen como fondo y ofreces los artículos de tu web por medio de RSS, solo se vería el texto del articulo pero no se vería la imagen asociada con el articulo.

Saludos