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.
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.
