Функция 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

cssselector {
  filter: brightness(valor);
}

Ejemplo

Establezcamos un brillo del 20% para nuestra imagen:

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

css#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%:

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

css#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:

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

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

Результат:

Véase también