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 :

brightness() - Fonction CSS

brightness()

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

Description rapide
Ajuste la luminosité d'un élément.
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)

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 fonction brightness() 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 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

Prise en charge par les navigateurs (compatibilité).

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
Prise en charge générale des filtres graphiques.
Colonne 2
Traitement de la fonction brightness().
1
Graphic filters
2
brightness()
Estimation de la prise en charge en pourcentage du parc actuel.
98%
94%

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 brightness().

Les spécifications CSS éditées par le W3C sont organisées en modules. brightness() 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 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.
Définit la saturation des couleurs d'une image.
Applique un effet sépia à une image.