Primera línea del texto
segunda línea del texto
<div style="background: transparent url(URL_imagen) no-repeat left top; height: 293px; margin: 0 auto; width: 400px;" />
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>
Lógicamente, el texto estará arriba. Si quisieramos ubicarlo abajo o en un lugar específico, deberíamos agregarle al DIV la propiedad position: relative y al contenido la propiedad position: absolute. De este modo, utilizando left, right, top y bottom podremos ubicar ese texto en cualquier lugar dentro de la imagen:
Primera línea del texto
segunda línea del texto
<div style="position: relative;background: transparent url(URL_imagen) no-repeat left top; margin: 0 auto; height: 293px; width: 400px;" />
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>
Lo mismo puede hacerse utilizando la imagen en una etiqueta IMG lo que además, permite que esta sea un enlace:
Primera línea del texto
segunda línea del texto
<div style="position: relative; margin: 0 auto;width: 400px;">
<a href="una_URL"><img src="URL_imagen" /></a>
<h4 style="-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px; background-color: CornflowerBlue; bottom: 20px; color: #FFF; margin: 0; opacity: 0.4; filter:alpha(opacity=40); padding: 5px 10px; position: absolute; width: 240px;">
Primera línea del texto<br />segunda línea del texto
</h4>
</div>
0 comentarios:
Publicar un comentario