Brightness() - Fonction CSS

brightness()

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

Description rapide
Ajuste la luminosité d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
Statut
Standard
Pourcentages
Calculés par rapport à la luminosité originale : 100% ne produit pas de changement de luminosité.
Module W3C
Module filtres et effets
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de brightness().

brightness - Syntax DiagramSyntax diagram of the brightness CSS function. b* b*brightness()brightness()
Schéma syntaxique de la fonction brightness().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

  • b est une valeur numérique sans unité.
    L'étoile indique qu'elle peut être omise, dans ce cas elle vaut 1.

Description de la fonction brightness().

La fonction brightness() permet d'ajuster la luminosité d'un élément. Elle est le plus souvent utilisée sur une image, mais peut fonctionner sur tout type d'élément.

brightness() applique un coefficient multiplicateur à chacun des pixels. L'effet sera donc nul sur du noir, qui correspond à la valeur 0.

La valeur brightness() peut être utilisée avec les propriétés suivantes :

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

Syntaxes de la fonction brightness().

  • filter: brightness(50%); n

    n indique l'importance du changement de luminosité. Cela peut être un accroissement ou une diminution de la luminosité.

    C'est une valeur numérique sans unité, ou un pourcentage.

    1. 0 indique une réduction totale de la luminosité (une image noire).
    2. Une valeur entre 0 et 1, ou un pourcentage entre 0% et 100%, indique une réduction plus ou moins importante de la luminosité.
    3. 1 ou 100% ne provoque aucun changement de luminosité.
    4. Une valeur supérieure à 1, ou un pourcentage supérieur à 100%, correspond à une augmentation de la luminosité.
    5. La valeur par défaut, lorsque les parenthèses sont vides, est 100%.
    6. Les valeurs négatives ne sont pas autorisées.

    Si aucune valeur n'est indiquée, la valeur par défaut est 1 : la luminosité de l'élément n'est donc pas modifiée.

Simulateur : brightness() utilisée avec filter.

filter :
Effet de brightness() sur du texte gris
Effet de brightness() sur du texte noir
Ajustement de la luminosité avec brightness()

Simulateur : brightness() utilisée avec backdrop-filter.

Lorsqu'un texte est sur un arrière-plan chargé, la lecture est laborieuse. La fonction brightness() utilisée avec backdrop-filter peut améliorer beaucoup la lisibilité en assombrissant l'arrière-plan si, comme dans notre exemple, le texte est en couleur claire.

backdrop-filter :
Estomper l'arrière-plan avec brightness()
Utilisation de brightness()
pour améliorer la lisibilité du texte

Support de la fonction brightness().

Les filtres graphiques sont depuis longtemps bien restitués par les navigateurs. La fonction brightness(), qui est un de ces filtres, est elle même bien reconnue par les navigateurs actuels.

Colonne 1
Capacité à appliquer un filtre sur un élément, avec la propriété filter.
Colonne 2
Support par les navigateurs de la fonction brightness() pour modifier la luminosité d'un texte ou d'une image.
1
Filtres
graphiques
2
Fonction
brightness()
Estimation de la prise en charge globale.
96%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Opéra

Safari

Firefox

Chrome pour Androïd

Chrome

Edge

Androïd Brower

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la fonction brightness().

  • Module effets et filtres - Niveau 1

    Première version du module de spécification définissant les filtres graphiques. La fonction brightness() est décrite dans ce module.
    WD
    25 Octobre 2012
    Document de travail.
    CR
    PR
    REC

Voir aussi : autres effets graphiques.

Voici la liste des propriétés et fonctions décrites dans la spécification "module filtres et effets" (Filter Effects Module).

Propriétés :

backdrop-filter
Applique un filtre graphique sur l'élément situé derrière l'élément ciblé.
color-interpolation
Définit l'espace de couleurs à utiliser pour calculer les dégradés, les animations et les combinaisons avec la couche alpha.
color-interpolation-filters
Définit dans quel espace de couleurs sont calculés les effets de filtrage. Par défaut cet espace est le linearRGB
filter
Applique un filtre graphique (flou, contraste, luminosité...) à un élément.
flood-color
Définit la couleur des remplissages et des ombrages dans le contexte de filtres SVG.
flood-opacity
Définit l'opacité des remplissages et des ombrages dans le contexte de filtres SVG.
lighting-color
Définit la couleur de l'éclairage dans le contexte d'un filtre SVG.

Fonctions :

blur()
blur() est un filtre graphique utilisable avec la propriété filter. La fonction applique un effet de flou sur l'élément.
contrast()
Ajuste le contraste d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
drop-shadow()
Définit l'ombre d'un élément : dimensions, flou, couleur, etc. C'est un filtre graphique qui s'utiilise avec la propriété filter.
grayscale()
Convertit un élément en nuances de gris (filtre graphique) de façon plus moins complète. A l'extrême les couleurs peuvent être complètement supprimées.
hue-rotate()
Change les couleurs d'une image en effectuant une rotation des teintes (filtre graphique).
invert()
Inverse les couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec le propriété filter.
opacity()
Détermine le degré de transparence d'un élément. C'est un filtre graphique qui s'utilise avec la propriété filter.
saturate()
Définit la saturation des couleurs d'une image ou d'un élément quelconque. C'est un filtre graphique qui s'utilise avec la propriété filter.
sepia()
Applique un effet sépia à une image ou un élément quelconque. C'est un (filtre graphique qui s'utilise avec la propriété filter.