CSS - La couleur et le fond - 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).

• Avec une valeur de 1, l'élément sera totalement opaque : c'est le comportement par défaut.
• Avec une valeur de 0, l'élément sera totalement transparent.
  
  

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 :

1 2 3 4

p {     opacity: 0.6; }

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

1 2 3 4 5 6 7 8 9 10 11

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.

1 2 3 4

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.

1 2 3 4 5

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é

• On change la couleur du texte avec la propriété color, la couleur de fond avec background-color.
• On peut indiquer une couleur en écrivant son nom en anglais (black, par exemple), sous forme hexadéciale (#FFC8D3) ou en notation RGB (rgb(250,25,118)).
• On peut ajouter une image de fond avec background-image. On peut choisir de fixer l'image de fond, de l'afficher en mosaïque ou non, et même de la positionner où on veut sur la page.
• On peut rendre une portion de la page transparente avec la propriété opacity ou avec la notation RGBa (identique à la notation RGB, avec une quatrième valeur indiquant le niveau de transparence).