⌘K

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

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

Exemplo

Vamos definir o brilho da nossa imagem para 20%: 

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;
}

Результат:

Exemplo

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

Результат:

Exemplo

Vamos definir o brilho original para a nossa imagem: 

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;
}

Результат:

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
BackFunção blurNextFunção contrast