Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

saturate() - Fonction CSS

saturate()

Résumé des caractéristiques de la fonction saturate()

Description rapide
Définit la saturation des couleurs d'une image.
Statut
Standard
Pourcentages
100% correspond à la saturation initiale (pas de modification).
Module W3C
Module filtres et effets
Références (W3C)
Statut du document:: WD (document de travail)

Description de la fonction saturate().

La fonction saturate() définit le degré de saturation des couleurs d'un élément, le plus souvent une image. Rappelons que la saturation qualifie la vivacité des couleurs. Des couleurs peu saturées sont proches du gris.

La fonction saturate() a un effet comparable à la fonction grayscale() (bien que fonctionnant de façon inversée) mais utilise un algorithme différent.

La fonction saturate() peut être utilisée avec :

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • filter : Applique un filtre graphique (flou, contraste...) à un élément.

Syntaxe de la fonction saturate().

  • filter: saturate(50%); n

    n est un nombre positif sans unité ou un pourcentage.
    cette valeur indique le taux de saturation :
    1 ou 100% ne change rien à l'image, tandis que 0 provoque une désaturation totale de l'image (remplacement de toutes les couleurs par des nuances de gris). Les valeurs supérieures à 1 ou à 100% augmentent la saturation des couleurs par rapport aux couleurs d'origine.

    Les valeurs négatives ne sont pas autorisées.

    Si aucune valeur n'est précisée (les parenthèses sont vides), la fonction saturate() applique la valeur 100%.

Simulateur.

filter :
Démonstration de la fonction saturate()

Compatibilité et prise en charge par les navigateurs.

Les filtres graphiques ne posent plus de problèmes de compatibilité. la fonction saturate() peut être utilisée sans restriction.

Colonne 1
Traitement général des filtres graphiques (modification des teintes, de la luminosité, ajout de lou, etc.).
Colonne 2
Prise en charge par les navigateurs de la fonction CSS saturate().
1
Graphic filters
2
saturate()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que saturate().

Les spécifications CSS éditées par le W3C sont organisées en modules. saturate() fait partie du Module filtres et effets (Filter Effects Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Applique un filtre graphique sur l'élément situé en arrière plan.
Définit dans quel espace de couleurs sont calculés les effets de filtrage.
Applique un filtre graphique (flou, contraste...) à un élément.

Fonctions.

Applique un effet de flou.
Ajuste la luminosité d'un élément.
Ajuste le contraste d'une image.
Définit l'ombre d'un élément (dimensions, flou, couleur).
Convertit une image en nuances de gris (noir et blanc).
Change les couleurs d'une image (rotation des teintes).
Inverse les couleurs d'une image.
Détermine le degré de transparence d'un élément.
Applique un effet sépia à une image.