Du texte par dessus une image

Comment ajouter du texte par dessus une image ?

C’est un effet à la mode : Positionner du texte avec une léger effet d’opacité sur une image.

Pour ce faire, il nous faut juste une pincée de CSS

D’abord voyons la structure XHTML :

[html]
<div id="image">
<div id="image-description">
<p>Du texte</p>
<p>par dessus l’image</p>
</div> <!– /image-description –>
</div> <!– /image –>
[/html]

Bon, rien de bien sorcier ici, on a un bloc conteneur qui va intégrer notre image de fond, et un autre bloc qui va contenir le texte.

Maintenant le CSS :

[css]
#image {
background:url(image.jpg) 0 0 no-repeat;
border:1px solid #000;
display:block;
height:300px;
position:relative;
width:300px;
}
#image-description {
bottom:50px;
left:0;
position:absolute;
width:100%;
}
#image-description p {
background-color:#000;
background:rgba(0, 0, 0, 0.5);
clear:left;
color:#fff;
float:left;
margin:0;
padding:5px 10px;
}
[/css]

Le rendu :

Explications :

• Ici, nous utilisons du positionnement « absolu » pour placer notre texte (à 50 pixel du bas de l’image)
• et surtout nous utilisons une propriété CSS3 rgba qui permet de préciser une opacité à notre couleur de fond.

DOWNLOAD :

• du-texte-par-dessus-une-image.zip