Como adicionar transparência no CSS usando a propriedade Opacity?

A transparência pode ser adicionada a elementos, como imagens e contêineres de div para melhorar a aparência geral de um site. Com o objetivo de fazer um elemento transparente, a propriedade CSS Opacity é usada. Esta propriedade pode renderizar valores de 0.0 a 1.0. Neste artigo, vamos guiá-lo como adicionar transparência aos elementos. Esta postagem cobre os seguintes tópicos.

1. Como adicionar transparência a um elemento
2. Adicionando um efeito de pairar junto com a transparência
3. Como adicionar transparência a um elemento
4. Adicionando transparência com RGBA

Vamos começar.

Como adicionar transparência a um elemento

Você pode fazer qualquer elemento (e.g. imagem) que está aparecendo no seu site transparente, atribuindo um certo valor à propriedade Opacity CSS do elemento.

Exemplo

Para entender o conceito de transparência, siga o exemplo abaixo.

Html

Aqui adicionamos uma imagem e definimos sua largura para 200px e altura para 250px.

CSS

img
Opacidade: 0.6;

A opacidade da imagem foi definida como 0.6.

Saída

A imagem é 60% opaca.

Observação: Opacidade e transparência são opostas uma à outra. Portanto, baixos valores de propriedade de opacidade tornarão o elemento mais transparente e vice -versa.

Por exemplo, se diminuirmos a opacidade e a definirmos como 0.2 assim.

img
Opacidade: 0.2;

A transparência aumentará.

A imagem é 20% opaca.

Adicionando um efeito de pairar junto com a transparência

Você pode adicionar um efeito de pairar, além de atribuir certa opacidade à imagem. Adicionar esse efeito mudará a transparência de uma imagem quando o usuário trazer o mouse sobre uma imagem específica.

Exemplo

O exemplo abaixo demonstra como usar um efeito de pairar com a propriedade Opacity.

Html

No código acima, estamos adicionando uma imagem e dando -lhe alguma largura e altura.

CSS

img
Opacidade: 0.4;

IMG: Hover
Opacidade: 1.0;

No código CSS acima, estamos primeiro atribuindo uma opacidade de 0.4 Para tornar a imagem transparente, então estamos adicionando um efeito de pairar à imagem com opacidade 1. Isso significa que, quando o usuário traz o mouse sobre a imagem, ele não será transparente e o oposto acontecerá quando o cursor do mouse for afastado da imagem.

Saída

Um efeito de pairar é adicionado com sucesso à imagem junto com a transparência.

Como adicionar transparência a um elemento e seus filhos

Usando a propriedade Opacity, quando você adiciona transparência a um elemento, os filhos desse elemento em particular também herdam a transparência.

Exemplo

Aqui vamos demonstrar como adicionar transparência a um elemento.

Html

Eu tenho uma opacidade de 0.6

Eu tenho uma opacidade de 1

Aqui criamos dois elementos para deixar claro como a transparência funciona para elementos html.

CSS

div.opacidade
Opacidade: 0.4;

div
Background-Color: rosa;
preenchimento: 15px;

O primeiro elemento div tem uma transparência de 0.4 e o outro elemento é completamente não transparente.

Saída

Quanto mais transparente um elemento, o conteúdo dentro desse elemento também será transparente.

Adicionando transparência com RGBA

As cores do RGBA são usadas para evitar a situação acima, onde você aplica opacidade a um elemento, o conteúdo dentro do elemento também fica transparente.

Exemplo

Para impedir que o texto presente dentro de um elemento seja transparente, use o seguinte código.

Html

Com propriedade de opacidade

Com cor RGBA

No código acima, estamos criando dois elementos. A primeira div recebeu uma opacidade de 0.2 para demonstrar a diferença entre usar apenas a propriedade Opacity e o uso de propriedades Opacity junto com as cores RGBA.

CSS

div.rgb
Antecedentes: RGB (255.192.203);
preenchimento: 15px;
Opacidade: 0.2;

div.rgba
Antecedentes: RGBA (255.192.203, 0.2);

A primeira div recebeu uma cor rosa de fundo, preenchimento de 15px e opacidade de 0.2. Enquanto a segunda div foi atribuída a mesma cor de fundo junto com uma opacidade de 0.2 como um quarto argumento no método RGBA.

Saída

O texto dentro do elemento não é transparente ao usar a transparência com as cores RGBA.

Conclusão

Você pode adicionar transparência a vários elementos HTML, como contêineres de div, ou imagens usando a propriedade Opacity. Esta propriedade gera valores de 0.0 a 1.0, além disso, quanto menor o valor desta propriedade, mais a transparência. Juntamente com a transparência, você também pode adicionar um efeito de pairar nos elementos, além disso, usar cores RGBA para impedir que o conteúdo dentro de um elemento seja transparente quando você adiciona transparência a ele. Esta postagem o guia como adicionar transparência no CSS usando a propriedade Opacity, juntamente com exemplos relevantes.