Afficher un titre sur une image avec effet de transparence

Suite à une question posé sur le forum sur la mise en place d'un bandeau en bas d'une image, je me suis penché sur le sujet pour réaliser ce petit tutoriel.Le principe est de pouvoir afficher une "légende" sur la partie basse d'une image avec un effet de transparence (pour les navigateurs qui acceptent le RGBA).

Démonstration :

Le jolie logo de Google
Le code XHTML :
<div class="image">
<div class="titre">Créer un site</div>
<img src="http://www.google.com/intl/fr_ALL/images/logo.gif" alt="Logo Google" />
</div>
Le code CSS :
.image{
border:1px solid #000;
width:276px;
height:110px;
padding:1px;
position: relative;
}
.titre {
position: absolute;
/* pour les navigateurs qui ne pige pas le rgba */
background-color: rgb(0, 0, 0);
/* pour les navigateur qui pige le rgba */ 
background-color: rgba(0, 0, 0, 0.5);
color:#FFF;
width:100%;
position:absolute;
bottom:0;
left:0;
text-align:center;
height:25px;
}

Le principe du RGBA est assez simple, on attribue simplement un chiffre de 0 à 1 après la couleur désigné au format rgb, qui permet de "régler" l'opacité à l'élément auquel il est attribué.

Couleur noir au format rgb -> rgb(0, 0, 0) correspond également à -> #000000 au format hexadécimal
Couleur noir + opacité au format rgba -> rgba(0, 0, 0, 0.5)

Pour les navigateurs qui n'acceptent pas le RGBA (IE entre autre ), on ajoute le style background-color: rgb(0, 0, 0); à la class .titre afin d'attribuer une couleur unie au bandeau. On peut éventuellement utilisé le filtre gradient filter pour définir l'opacité sur le navigateur Internet Explorer mais je doit avoué avoir un peut la flemme !

Voir/déposer un commentaire (4) | Signaler un problème