Artigos CSS CSS: Opacity

A propriedade opacity do CSS nos permite alterar a opacidade de um elemento, deixando-o mais ou menos transparente.

Sintaxe

Para alterar a opacidade de um elemento, basta atribuir um valor entre 0 e 1 à propriedade, opacity. Neste caso, o valor 0 indica um elemento completamente transparente, enquanto o valor 1 torna o elemento totalmente opaco.

opacity: [valor entre 0 e 1] ;

Exemplo

No exemplo abaixo podemos ver uma imagem cuja opacidade foi alterada para 50% (0.5), ou seja, ela está com 50% de transparência:


 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
     <meta charset="UTF-8">
     <title>Cores em CSS</title>
     <style>
         body{ background-image: url('bg.jpg'); }
         img { opacity : 0.5; }
     </style>
 </head>
 <body>
     <img src="circulo.png" alt="Imagem">
 </body>
 </html>

Linha 7: aqui estamos apenas atribuindo um plano de fundo ao documento, para que seja possível perceber que a imagem está transparente;

Linha 8: nesta linha estamos, de fato, modificando a opacidade da imagem, atribuindo a ela o valor 0.5, que equivale a 50%.

O resultado desse código pode ser visto na figura a seguir. Note que é possível ver, através da imagem, o conteúdo que está atrás dela.

Imagem com transparência

Essa propriedade foi adicionada na versão 3 do CSS e já é implementada por todos os principais browsers atualmente, portanto, pode ser utilizada em projetos novos, ou mesmo na melhoria de projetos mais antigos.