Propriedade CSS opacity
A propriedade CSS opacity define o nível de transparência de um elemento. Experimente exemplos da propriedade opacity e veja os resultados.
A propriedade CSS opacity define o grau de transparência de um elemento. Ela controla o elemento por completo — texto, fundo, bordas e quaisquer elementos filhos ficam desbotados juntos. É uma das propriedades do CSS3.
Use opacity quando quiser que um elemento (e tudo dentro dele) pareça desbotado: para escurecer um botão inativo, criar um efeito de hover ou sobrepor uma marca d'água ao conteúdo.
Como o valor de opacity funciona
O valor é um número entre 0 e 1:
0— o elemento é totalmente transparente (invisível, mas ainda ocupa espaço e permanece interativo).1— o valor padrão; o elemento é totalmente opaco.- Qualquer valor intermediário, como
0.5, torna o elemento parcialmente transparente. Valores menores significam maior transparência.
Também é possível escrever o valor como uma porcentagem nos navegadores modernos, onde 50% equivale a 0.5.
Valores negativos são inválidos e são limitados — o navegador trata qualquer valor abaixo de 0 como 0 e qualquer valor acima de 1 como 1.
A opacidade afeta os elementos filhos também. Quando você desbota um elemento pai, todos os filhos são desbotados junto, e você não pode tornar um filho totalmente opaco novamente atribuindo opacity: 1 a ele. Se você quiser apenas um fundo semitransparente mantendo o texto e os filhos sólidos, use uma cor RGBA no background-color — por exemplo, background-color: rgba(142, 191, 66, 0.3).
Um elemento com valor de opacity menor que 1 cria um novo contexto de empilhamento. Isso pode alterar a forma como ele se sobrepõe a elementos vizinhos, fazendo com que um elemento desbotado apareça acima ou abaixo de irmãos de forma diferente do esperado.
| Valor Inicial | 1.0 |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Não. |
| Animável | Sim. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.opacity = "0.3"; |
Sintaxe
Sintaxe CSS da propriedade opacity
opacity: number | initial | inherit;Exemplo da propriedade opacity:
Exemplo de código CSS com opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example1 {
background-color: #8ebf42;
opacity: 0.3;
}
.example2 {
background-color: #8ebf42;
opacity: 1;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity level is 0.3;</h3>
<div class="example1"> Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </div>
<h3>Opacity level is 1;</h3>
<div class="example2">Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</body>
</html>Resultado
No exemplo abaixo, o nível de opacidade da primeira imagem é 1.0, da segunda imagem é 0.6 e da terceira imagem é 0.2.
Exemplo da propriedade opacity com três níveis de opacidade:
Outro exemplo de código CSS com opacity
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.a {
opacity: 1;
}
img.b {
opacity: 0.6;
}
img.c {
opacity: 0.2;
}
</style>
</head>
<body>
<h2>Opacity property example</h2>
<h3>Opacity: 1.0;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="a" />
<h3>Opacity: 0.6;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="b" />
<h3>Opacity: 0.2;</h3>
<img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="house" width="300" height="300" class="c" />
</body>
</html>opacity vs. fundos RGBA
Um erro comum é usar opacity quando se deseja apenas um fundo semitransparente. Como opacity desbota os elementos filhos também, o texto dentro de uma caixa fica mais fraco e difícil de ler. Uma cor de fundo RGBA aplica transparência apenas à cor de fundo, mantendo o texto totalmente opaco:
/* Fades the whole box, including the text */
.with-opacity {
background-color: #8ebf42;
opacity: 0.3;
}
/* Only the background is transparent; text stays crisp */
.with-rgba {
background-color: rgba(142, 191, 66, 0.3);
}Para controlar a cor do próprio elemento, consulte background-color.
Efeito de desbotamento no hover
Como opacity é animável, combina naturalmente com transition para criar efeitos de transição suave, como desbotar uma imagem até o usuário passar o cursor sobre ela:
.thumb {
opacity: 0.6;
transition: opacity 0.3s ease;
}
.thumb:hover {
opacity: 1;
}opacity vs. visibility e display
opacity: 0, visibility: hidden e display: none ocultam um elemento, mas se comportam de formas diferentes:
| Declaração | Visível | Ocupa espaço | Clicável |
|---|---|---|---|
opacity: 0 | Não | Sim | Sim |
visibility: hidden | Não | Sim | Não |
display: none | Não | Não | Não |
Um elemento com opacity: 0 é invisível, mas ainda responde a cliques. Adicione pointer-events: none se precisar que ele também não seja interativo.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| number | Define o nível de opacidade. O valor padrão é 1.0. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |