Home | PixelFormer | Exemplos de imagens Png de fundo transparentes - Background em Css

Imagens de fundo transparentes - Background em Css

Exemplos de imagem Semi-Transparente

Essa página é apenas um exemplo do uso de imagens transparentes no Css do html, imagens que fiz com o Editor PixelFormer, a página serve apenas para visualizar a novidade que é uma Png com opacidade, que pode substituir o opacity com vantagens, para aprender css você pode fazer um curso ou pesquisar dicas e tutoriais na web ou em um sites próprios para isso, como o Maujor.

Abaixo você verá duas imagens opacas lado a lado, uma delas é mais opaca(transparente).

Nesta página usei três imagens opacas, se você observar, este conteúdo tem um fundo que se destaca da lateral, a imagem de fundo da página é a mesma, normal(essa, clique), mas nesta área aqui usei ainda uma imagem opaca e amarela, por isso tem uma diferença na cor, a imagem é essa, mas você não verá ela porque é muito pequena e, super leve.
Descobri a existência de uma Png semi-transparente quando vi os novos modelos do blogger, mas já tinha usado gif transparente para dar este efeito, mas não ficou bom por que com uma resolução de tela maior fica aparecendo pontos com falha.
Imagem pouco opaca ou semi-transparente com cores
Imagem muito opaca com fundo transparente

Mesma imagem, outro efeito

Abaixo, os exemplos de duas imagens(transparente) com diferentes cores de fundo(background) usando Css, além de mostrar a transparência da imagem, você poderá ter uma ideia de coisas que se pode fazer, ao observar os exemplos abaixo, você poderá pensar nas possibilidades do uso de uma imagem semi-transparente como fundo em uma página Html com Css.
Imagem um pouco transparente e muito transparente
A imagem da direita tem pequeno grau de transparência, a imagem da esquerda tem alto grau de transparência, na imagem com fundo branco você poderá ver as cores da imagem com menos alteração, naquelas que tiverem outra cor de fundo você poderá ver como elas mudam, isso acontece devido a 'mistura' das cores.

Só para ressaltar, abaixo só usei duas imagens, a única coisa de diferente entre todas é um fundo adicionado no Html da página.

Cor de fundo branco
Imagem pouco opaca em fundo brancoImagem muito opaca em fundo branco
Cor de fundo cinza
Imagem pouco opaca em fundo cinzaImagem muito opaca em fundo cinza
Cor de fundo preto
Imagem pouco opaca em fundo pretoImagem muito opaca em fundo preto
Cor de fundo azul claro
Imagem pouco opaca em fundo azulImagem muito opaca em fundo azul
Cor de fundo verde claro
Imagem pouco opaca em fundo verdeImagem muito opaca em fundo verde
Cor de fundo amarela
Imagem pouco opaca em fundo amareloImagem muito opaca em fundo amarelo
Cor de fundo vermelha
Imagem pouco opaca em fundo vermelhoImagem muito opaca em fundo vermelho