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