Fonction CSS opacity()

Définition et utilisation

CSS opacity() Les fonctions de filtre sont utilisées pour appliquer un effet de transparence aux éléments.

  • 100% (ou 1) n'a pas d'effet
  • 50% (ou 0,5) rend l'élément 50% transparent
  • 0% (ou 0) rend l'élément complètement transparent

Exemple

Exemple 1

Définir différentes transparences pour les images :

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

Essayez-le vous-même

Exemple 2

apporte opacity() et backdrop-filter Utilisation conjointe des propriétés :

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Essayez-le vous-même

Syntaxe CSS

opacity(amount)
Valeur Description
amount

Optionnel. Spécifiez une valeur numérique ou en pourcentage de transparence. 0% (ou 0) rend l'élément complètement transparent.

100% (ou 1) représente l'image originale (sans effet). La valeur par défaut est 1.

Détails techniques

Version : Module de l'effet de filtrage CSS niveau 1

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge pleinement la fonction pour la première fois.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Pages associées

Référence :Attribut filter CSS

Référence :Fonction CSS blur()

Référence :Fonction CSS brightness()

Référence :Fonction CSS contrast()

Référence :Fonction CSS drop-shadow()

Référence :Fonction CSS grayscale()

Référence :Fonction CSS hue-rotate()

Référence :Fonction CSS invert()

Référence :Fonction saturate() CSS

Référence :Fonction sepia() CSS