Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
opacity
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
Sumário
A propriedade CSSopacity 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:
background: rgba(0, 0, 0, 0.4);Usando essa propriedade com um valor diferente de 1, o elemento é colocado em um novocontexto de empilhamento.
| Initial value | 1 |
|---|---|
| Aplica-se a | all elements |
| Inherited | não |
| Percentages | map to the range[0,1] |
| Computed value | The same as the specified value after clipping the<number> to the range [0.0, 1.0]. |
| Animation type | by computed value type |
Sintaxe
/* 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 0O elemento é totalmente transparente (isto é, invisível). Qualquer <number>entre 0 e 1O elemento é translúcido (isto é, o background é visível). 1O elemento é totalmente opaco (sólido).
Sintaxe formal
opacity =
<opacity-value>
<opacity-value> =
<number>|
<percentage>
Exemplos
Exemplo básico
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 */}<div>Você mal vê isso.</div><div>Isso é mais fácil de ver.</div><div>Isso é muito fácil de ver.</div>Opacidade diferente com:hover
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;}<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" />Especificações
| Specification |
|---|
| CSS Color Module Level 4 # propdef-opacity |
| Scalable Vector Graphics (SVG) 2 # ObjectAndGroupOpacityProperties |