⌘K

Função opacity

A função opacity permite alterar a transparência da imagem de fundo. O valor 100% ou 1 mantém a transparência original da imagem. O valor 0 indica que a imagem se tornará completamente transparente. Qualquer número localizado neste intervalo define uma transparência parcial do fundo. Não é possível definir um valor negativo. Por padrão, o valor é 1.

Sintaxe

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

Exemplo

Vamos definir a transparência da nossa imagem para 50%: 

html<div id="elem"></div>
css#elem {
  filter: opacity(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

Agora vamos definir a transparência para 100%: 

html<div id="elem"></div>
css#elem {
  filter: opacity(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Exemplo

Agora vamos definir na função opacity o valor igual a 0: 

html<div id="elem"></div>
css#elem {
  filter: opacity(0);
  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 brightness,
    que define o brilho do fundo
  • função contrast,
    que define o contraste do fundo
  • função drop-shadow,
    que define uma sombra para o fundo
  • função hue-rotate,
    que define a matiz do fundo
  • função invert,
    que inverte as cores de fundo
  • função sepia,
    que converte o fundo para sépia
  • propriedade background,
    que é uma propriedade abreviada para o fundo
  • propriedade background-image,
    com a qual se pode definir uma imagem de fundo para um bloco
BackFunção invertNextFunção sepia