Funzione brightness

La funzione brightness permette di modificare la luminosità dell'immagine di sfondo. La luminosità originale dello sfondo è determinata dal valore 100% o 1, riducendoli si diminuisce anche la luminosità dell'immagine. Di conseguenza, aumentando il valore oltre 100% la luminosità aumenta. I valori negativi non vengono applicati, e un valore vuoto viene automaticamente considerato come 1.

Sintassi

selettore {
	filter: brightness(numero);
}

Esempio

Impostiamo la luminosità della nostra immagine al 20%:

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

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

Esempio

E ora aumentiamo la luminosità dell'immagine fino al 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;
}

Esempio

Impostiamo la luminosità originale per la nostra immagine:

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

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

Vedi anche

funzione blur,
che sfoca lo sfondo
funzione contrast,
che imposta il contrasto allo sfondo
funzione drop-shadow,
che imposta l'ombra allo sfondo
funzione hue-rotate,
che imposta la tonalità di colore allo sfondo
funzione invert,
che inverte i colori dello sfondo
funzione opacity,
che imposta la trasparenza allo sfondo
funzione sepia,
che trasforma lo sfondo in seppia
proprietà background,
che rappresenta una proprietà abbreviata per lo sfondo
proprietà background-image,
con cui si può assegnare un'immagine di sfondo a un blocco
proprietà filter,
che imposta lo stile per lo sfondo