La transparence en CSS

Objectif

Introduction

• Commençons avec la gestion de la transparence. Son adoption sur le web a longtemps été retardée,notamment en raison du fait que la norme CSS2.1 ne fait état d'aucune règle de gestion de la transparence.
• C'est désormais chose faite avec CSS3 qui définit la règle opacity et les fonctions de couleurs rgba et hsla.
• Le mot-clé transparent est, quant à lui, étendu à une utilisation pour toutes les propriétés de couleur.

opacity

1. Syntaxe CSS

   opacity: number|initial|inherit;

2. Définition et usage

   • La propriété opacity définit le niveau d'opacité d'un élément.
   • Le niveau d'opacité décrit le niveau de transparence, où :
     • 1 n'est pas transparent du tout,
     • 0.5 est transparent à 50%
     • 0 est complètement transparent.

3. Définition et usage

   • exemple d'opacité à 60 % appliqué sur une div :
   div{ opacity: 0.6; }

rgba, hsla, transparent