CSS: Opacity

Nesta documentação você aprenderá a utilizar a propriedade opacity do CSS, que permite alterar a opacidade de um elemento, deixando-o transparente.

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

Run

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.

Artigos relacionados