Função brightness

A função brightness permite alterar o brilho de uma imagem de fundo. O brilho original do fundo é determinado pelo valor de 100% ou 1. Ao diminuir esses valores, o brilho da imagem também é reduzido. Consequentemente, ao aumentar o valor para mais de 100%, o brilho é aumentado. Valores negativos não são aplicados, e um valor vazio é automaticamente interpretado como 1.

Sintaxe

seletor {
	filter: brightness(número);
}

Exemplo

Vamos definir o brilho da nossa imagem para 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;
}

Exemplo

E agora vamos aumentar o brilho da imagem para 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;
}

Exemplo

Vamos definir o brilho original para a nossa imagem:

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

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

Veja também

função blur,
que desfoca o fundo
função contrast,
que define o contraste para o fundo
função drop-shadow,
que define uma sombra para o fundo
função hue-rotate,
que define a matiz para o fundo
função invert,
que inverte as cores de fundo
função opacity,
que define a transparência para o fundo
função sepia,
que converte o fundo para sépia
propriedade background,
que é uma propriedade abreviada para o fundo
propriedade background-image,
que permite definir uma imagem de fundo para um bloco
propriedade filter,
que define o estilo para o fundo