Fonction brightness

La fonction brightness permet de modifier la luminosité de l'image d'arrière-plan. La luminosité originale de l'arrière-plan est déterminée par la valeur 100% ou 1, leur diminution réduit également la luminosité de l'image. En conséquence, lorsque la valeur est augmentée au-delà de 100% la luminosité augmente. Les valeurs négatives ne sont pas appliquées, et une valeur vide est automatiquement interprétée comme 1.

Syntaxe

sélecteur {
	filter: brightness(valeur);
}

Exemple

Définissons une luminosité de 20% pour notre image :

<div id="elem"></div>

#elem {
	filter: brightness(20%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemple

Et maintenant, augmentons la luminosité de l'image jusqu'à 120% :

<div id="elem"></div>

#elem {
	filter: brightness(120%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemple

Définissons la luminosité originale pour notre image :

<div id="elem"></div>

#elem {
	filter: brightness(1);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voir aussi

la fonction blur,
qui floute l'arrière-plan
la fonction contrast,
qui définit le contraste de l'arrière-plan
la fonction drop-shadow,
qui ajoute une ombre portée à l'arrière-plan
la fonction hue-rotate,
qui modifie la teinte de l'arrière-plan
la fonction invert,
qui inverse les couleurs de l'arrière-plan
la fonction opacity,
qui définit la transparence de l'arrière-plan
la fonction sepia,
qui convertit l'arrière-plan en sépia
la propriété background,
qui est une propriété raccourcie pour l'arrière-plan
la propriété background-image,
qui permet de définir une image d'arrière-plan pour un élément
la propriété filter,
qui définit un style de filtre pour l'arrière-plan