Opacidade/Transparente do CSS

opacidade A propriedade especifica a opacidade/transparente do elemento.

imagem transparente

opacidade O valor da propriedade opacity varia de 0.0 a 1.0. Quanto menor o valor, mais transparente:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacidade 1

Exemplo

img {
  opacidade: 0.5;
}

Experimente você mesmo

efeito de sobreposição transparente

opacidade A propriedade geralmente é usada com :hover Os seletores podem ser usados juntos, assim podemos alterar a opacidade ao passar o mouse:

Tulip
Tulip
Flower

Exemplo

img {
  opacidade: 0.5;
}
img:hover {
  opacity: 1.0;
}

Experimente você mesmo

Explicação do exemplo

O primeiro bloco de CSS é semelhante ao código do exemplo 1. Além disso, adicionamos um efeito quando o usuário passar o mouse sobre uma das imagens. Neste caso, quando o usuário passar o mouse sobre a imagem, queremos que a imagem seja opaca. Este CSS é opacidade:1;.

Quando o ponteiro do mouse sai da imagem, a imagem novamente ficará transparente.

Exemplo de efeito de ponta reversa:

Tulip
Tulip
Flower

Exemplo

img:hover {
  opacidade: 0.5;
}

Experimente você mesmo

caixa transparente

usando opacidade Quando a propriedade de opacidade é aplicada ao fundo do elemento, todos os elementos filhos herdam a mesma opacidade. Isso pode tornar o texto dentro de elementos completamente transparentes difícil de ler:

opacidade 1
opacidade 0.6
opacidade 0.3
opacidade 0.1

Exemplo

div {
  opacidade: 0.3;
}

Experimente você mesmo

Uso da opacidade RGBA

Se você não deseja aplicar opacidade aos elementos filhos, como no exemplo acima, use valores de cor RGBA. No exemplo a seguir, define-se a cor de fundo em vez da opacidade do texto:

100% de opacidade
60% de opacidade
30% de opacidade
10% de opacidade

Você já aprendeu conosco CSS Colors Nesta seção, você aprendeu que pode usar RGB como valores de cor. Além do RGB, pode-se usar valores de cor RGB com canal alpha (RGBA) - esse canal determina a opacidade da cor.

Os valores de cor RGBA são especificados como: rgba(vermelho, verde, azul, alpha) alpha Os parâmetros são números entre 0.0 (completamente transparente) e 1.0 (completamente opaco).

Dica:Você vai aprender conosco CSS Colors Nesta seção, você aprendeu mais sobre cores RGBA.

Exemplo

div {
  fundo: rgba(76, 175, 80, 0.3) /* fundo verde com opacidade de 30% */
}

Experimente você mesmo

Texto na caixa transparente

Este é um texto localizado dentro de uma caixa transparente.

Exemplo

<html>
<head>
<style>
div.background {
  fundo: url(klematis.jpg) repetir;
  borda: 2px sólida preta;
}
div.transbox {
  margem: 30px;
  cor-fundo: #ffffff;
  borda: 1px sólida preta;
  opacidade: 0.6;
}
div.transbox p {
  margem: 5%;
  font-weight: negrito;
  cor: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>Este é um texto localizado dentro de uma caixa transparente.</p>
  </div>
</div>
</body>
</html>

Experimente você mesmo

Explicação do exemplo

Primeiro, criamos um elemento <div> com imagem de fundo e borda (class="background").

Em seguida, criamos outro <div> dentro do primeiro <div> (class="transbox").

<div class="transbox"> tem cor de fundo e borda - este div é transparente.

Dentro de um <div> transparente, adicionamos alguns textos dentro do elemento <p>.