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
# propdef-opacity
Scalable Vector Graphics (SVG) 2
# ObjectAndGroupOpacityProperties

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
opacity
Support for percentage opacity values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Veja também