Функция brightness

La función brightness permite cambiar el brillo de una imagen de fondo. El brillo original del fondo se determina con el valor 100% o 1, al disminuirlos se reduce también el brillo de la imagen. En consecuencia, al aumentar el valor por encima de 100% el brillo aumenta. No se aplican valores negativos, y un valor vacío se interpreta automáticamente como 1.

Sintaxis

selector {
	filter: brightness(valor);
}

Ejemplo

Establezcamos un brillo del 20% para nuestra imagen:

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

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

Ejemplo

Y ahora aumentemos el brillo de la imagen a 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;
}

Ejemplo

Establezcamos el brillo original para nuestra imagen:

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

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

Véase también

función blur,
que desenfoca el fondo
función contrast,
que establece el contraste del fondo
función drop-shadow,
que establece una sombra para el fondo
función hue-rotate,
que establece la tonalidad del fondo
función invert,
que invierte los colores del fondo
función opacity,
que establece la transparencia del fondo
función sepia,
que transforma el fondo a sepia
propiedad background,
que es una propiedad abreviada para el fondo
propiedad background-image,
con la que se puede asignar una imagen de fondo a un bloque
propiedad filter,
que establece el estilo para el fondo