Opacidade / transparência em imagem e texto com CSS3

Resumo: Códigos CSS3 para transparência com compatibilidade para Chrome, Firefox e Internet Explorer.

Para colocarmos transparência em um elemento na web, seja texto ou imagem, basta usarmos o seguinte código de CSS3 (no exemplo aplicará transparência de 65%):

.transparente {
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
}

  • opacity é o código oficial,
  • -moz-opacity para compatibilidade com o navegador Mozilla Firefox
  • filter para versões antigas do Internet Explorer.

Agora basta atribuirmos a classe “transparente” ao elemento que gostaríamos de adicionar a transparência.

 

Pós Graduanda em MBA em Marketing e Branding e graduada em Design Gráfico, trabalhou principalmente como gerente de operações, gerente de projetos e web developer. Tem experiência no planejamento e processo de aplicativos mobile, design de interface do usuário e especializações como programadora e desenvolvedora de sites usando HTML5, CSS3, jQuery, PHP, MySQL e WordPress.