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:

    01 <!DOCTYPE html>
    02 <html lang="pt-br">
    03 <head>
    04     <meta charset="UTF-8">
    05     <title>Cores em CSS</title>
    06     <style>
    07         body{ background-image: url('bg.jpg'); }
    08         img { opacity : 0.5 }
    09     </style>
    10 </head>
    11 <body>
    12     <img src="circulo.png" alt="Imagem">
    14 </body>
    15 </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.