opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Sumário

A propriedade CSS opacity especifica a transparência de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto.

O valor aplica-se ao elemento como um todo, incluindo seu conteúdo, apesar de o valor não ser herdado por elementos filhos. Assim, um elemento e seus elementos filhos têm todos a mesma opacidade relativa ao background do elemento, mesmo se o elemento e seus elementos filhos tiverem opacidades diferentes entre si.

Se você não quer aplicar a opacidade ao elemento filho - use isto:

css
background: rgba(0, 0, 0, 0.4);

Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novo contexto de empilhamento.

Initial value1
Aplica-se aall elements
Inheritednão
Percentagesmap to the range [0,1]
Computed valueThe same as the specified value after clipping the <number> to the range [0.0, 1.0].
Animation typeby computed value type

Sintaxe

css
/* Totalmente opaco */
opacity: 1;
opacity: 1;

/* Translúcido */
opacity: 0.6;

/* Totalmente transparente */
opacity: 0;
opacity: 0;

/* Valores globais */
opacity: inherit;
opacity: initial;
opacity: unset;

Valores

<number>

É um <number> no intervalo de 0.0 a 1.0, sendo estes incluídos, representando a opacidade do canal, que é o valor de seu canal alfa. Qualquer valor fora do intervalo, apesar de válido, é aproximado ao valor mais próximo dentro do intervalo.

Valor Significado
0 O elemento é totalmente transparente (isto é, invisível).
Qualquer <number> entre 0 e 1 O elemento é translúcido (isto é, o background é visível).
1 O elemento é totalmente opaco (sólido).

Sintaxe formal

opacity = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Exemplos

Exemplo básico

css
div {
  background-color: yellow;
}
.light {
  opacity: 0.2; /* Mal consegue ver o texto acima do background */
}
.medium {
  opacity: 0.5; /* Vê o texto mais claramente acima do background */
}
.heavy {
  opacity: 0.9; /* Vê o texto muito claramente acima do background */
}
html
<div class="light">Você mal vê isso.</div>
<div class="medium">Isso é mais fácil de ver.</div>
<div class="heavy">Isso é muito fácil de ver.</div>

Opacidade diferente com :hover

css
img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /* IE8 e anteriores */
  zoom: 1; /* Ativa "hasLayout" no IE 7 e anteriores */
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}
html
<img
  src="//developer.mozilla.org/media/img/mdn-logo.png"
  alt="MDN logo"
  width="128"
  height="146"
  class="opacity" />

Especificações

Specification
CSS Color Module Level 4
# transparency

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também