Opacidade do CSS (Opacidade)

A propriedade opacity CSS especifica a opacidade de um elemento. A propriedade opacity especifica a opacidade de um elemento. Em outras palavras, a propriedade opacity especifica o grau de cobertura do fundo por trás de um elemento.

Transparência cross-browser

Agora, a opacidade (opacity) é uma parte do CSS3Parte de um padrão, mas existe há muito tempo. No entanto, os navegadores mais antigos têm maneiras diferentes de especificar opacidade ou transparência.

Firefox, Safari, Chrome, Opera e IE9possua CSS de opacidade

Este é o sintaxe mais recente da opacidade CSS em todos os navegadores atuais.

p {
　　　　opacity: 0.7;
}

As regras de estilo acima farão com que o elemento de parágrafo70% opaco (ou30% transparente).

O valor da propriedade opacity varia de 0.0 a1. Defina opacity:1; tornará o elemento completamente opaco (ou seja, 0% transparente), enquanto opacity: 0; tornará o elemento completamente transparente (ou seja,100% transparente).

Internet Explorer 8e métodos de implementação de transparência CSS

Internet Explorer 8e versões mais antigas suportam o atributo específico do Microsoft “filtro alpha” para especificar a transparência do elemento.

p {
　　　　filtro: alpha(opacity=50);
　　　　zoom:　1;　　/*　Correção para IE7　*/
}

Transparência CSS compatível com todos os navegadores

Combinando os dois passos acima, você obterátodos os navegadoresparaCódigo de transparência.

p {
　　　　opacity: 0.5;　　/*　Opacidade para Navegadores Modernos　*/
　　　　filtro: alpha(opacity=50);　　/*　Opacidade para IE8　e versões mais antigas　*/
　　　　zoom:　1;　　/*　Correção para IE7　*/
}

Transparência de imagem CSS

Você também pode usar CSS Opacity para criar imagens transparentes.

As três imagens na figura a seguir são provenientes da mesma imagem de origem. A única diferença entre elas é a transparência.

Mudança de transparência da imagem ao passar o mouse

A seguir, um exemplo demonstra o uso comum da transparência de imagem CSS, onde, quando o ponteiro do mouse é movido sobre a imagem, a transparência da imagem muda.

—mova o ponteiro do mouse sobre a imagem para ver o efeito.

Texto dentro da caixa transparente

Ao usar opacidade em elementos, não apenas o fundo do elemento terá transparência, mas todos os seus elementos filhos também se tornarão transparentes. Se o valor da opacidade aumentar, o texto dentro do elemento transparente ficará difícil de ler.

Para evitar isso, você pode usar imagens PNG transparentes ou colocar o bloco de texto fora da caixa transparente e usar negativomargemoualinhamento CSSintroduzindo-o visivelmente para dentro.

div　{
　　　　float: left;
　　　　opacity: 0.7;
　　　　border:　1px solid #949781;
}
p {
　　　　float: left;
　　　　position: relative;
　　　　margin-left:　-400px;
}

usando a CSS de transparência RGBA

Além do RGB, o CSS3Também introduziu um novo método RGBA para especificar uma cor, que inclui a opacidade alpha como parte do valor da cor. RGBA representa Vermelho, Azul, Verde, Alpha.}}

A declaração RGBA é uma maneira muito simples de definir a opacidade da cor.

div　{
　　　　background:　rgba(200,　54,　54,5);
}
p {
　　　　color:　rgba(200,　54,　54,25);
}

,　0.-255Os três primeiros números representam os valores de cor no RGB, ou seja, vermelho (0-255), verde (0-255), o quarto número representa o azul (01valores de opacidade alpha entre (0 para cor completamente transparente, enquanto valores1tornando-o completamente opaco).

Uma característica importante a ser notada sobre a opacidade RGBA é-Capacidade de especificar a opacidade de uma cor individual. Usando RGBA, podemos tornar a cor do texto transparente, mantendo o fundo completo.

— ou ignorar a cor do texto, alterando apenas a opacidade do fundo.

Você verá que é fácil especificar uma cor individual usando RGBA em vez da opacidade do elemento inteiro. No entanto, é sempre recomendado definir uma cor de reserva para navegadores que não suportam cores RGBA.

Cor de Reserva para Declaração RGBA

Nenhum navegador suporta cores RGBA. No entanto, você pode fornecer outras opções para navegadores que não suportam, por exemplo, imagens PNG de cor pura ou transparente.

p {
　　　　/*　Reserva para navegadores da web que não suportam39;não há suporte a RGBA　*/
　　　　background:　rgb(0,　0,　0);
　　　　/*　RGBa com 0.5　opacidade　*/
　　　　background:　rgba(0,　0,　0,　0.5);
}