La transparence

Parent Previous Next


La transparence



Le CSS nous permet de jouer très facilement avec les niveaux de transparence des éléments ! Pour cela, nous allons utiliser des fonctionnalités de CSS3 : la propriété opacity et la notation RGBa.


La propriété opacity


La propriété opacity, très simple, permet d'indiquer le niveau d'opacité (c'est l'inverse de la transparence).

Il faut donc choisir une valeur comprise entre 0 et 1. Ainsi, avec une valeur de 0.6, votre élément sera opaque à 60%… et on verra donc à travers !

Voici comment on peut l'utiliser :

p

{

    opacity: 0.6;

}


Voici un exemple qui va nous permettre d'apprécier la transparence. Vous en trouverez le rendu à la figure suivante.


body

{

    background: url('neige.png');

}

 

p

{

    background-color: black;

    color: white;

    opacity: 0.3;

}



Un paragraphe transparent


Notez que la transparence fonctionne sur tous les navigateurs récents, y compris Internet Explorer à partir de IE9.

Si vous appliquez la propriété opacity à un élément de la page, tout le contenu de cet élément sera rendu transparent (même les images, les autres blocs à l'intérieur, etc.). Si vous voulez juste rendre la couleur de fond transparente, utilisez plutôt la notation RGBa que nous allons découvrir.


La notation RGBa


CSS3 nous propose une autre façon de jouer avec la transparence : la notation RGBa. Il s'agit en fait de la notation RGB que nous avons vue précédemment, mais avec un quatrième paramètre : le niveau de transparence (appelé « canal alpha »). De la même façon que précédemment, avec une valeur de 1, le fond est complètement opaque. Avec une valeur inférieure à 1, il est transparent.

p

{

    background-color: rgba(255, 0, 0, 0.5); /* Fond rouge à moitié transparent */

}

C'est aussi simple que cela. Vous pouvez obtenir exactement le même effet qu'avec opacity juste en jouant avec la notation RGBa, essayez !

Cette notation est connue de tous les navigateurs récents, y compris Internet Explorer (à partir de IE9). Pour les navigateurs plus anciens, il est recommandé d'indiquer la notation RGB classique en plus de RGBa. 
Pour ces navigateurs, le fond ne sera alors pas transparent mais, au moins, il y aura bien une couleur d'arrière-plan.


p

{

    background-color: rgb(255,0,0); /* Pour les navigateurs anciens */

    background-color: rgba(255,0,0,0.5); /* Pour les navigateurs plus récents */

}


En résumé


Créé avec HelpNDoc Personal Edition: Produire des livres électroniques facilement