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 :

CSS - Fonction brightness()

brightness() est une fonction du langage CSS. Elle permet de gérer la luminosité d'un élément sur une page Web. Elle est le plus souvent utilisée sur une image, mais peut fonctionner sur tout type d'élément.

Description de la fonction brightness().

La fonction brightness() modifie la luminosité d'une élément, le plus souvent une d'image.

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

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • filter : Filtre graphique.

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é.

Simulateur.

filter:
( n )
Effet de brightness() sur du texte et sur une image

Ajustement de la luminosité avec brightness()

Voir aussi...

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.