11
MAR
2013
autor
XyBeR
categoria
Tectudo
Aplicar transparência em imagens com CSS

CSS transparência

Aplicar feitos de transparência através do uso do CSS pode facilitar na hora do desenvolvimento do seu web site alem de realizar um reaproveitamento de material já existente e economizando espaço no servidor.

É possível obter o efeito de transparência utilizando imagens do tipo GIF, JPG e outros formatos que não seja PNG transparente. Como estamos sempre batendo de frente com alguns navegadores para criar o efeito e a forma que desejamos iremos utilizar 3 linhas de comando em CSS para atender a todos os navegadores disponíveis.

  • opacity: 0.70 – Previsto nas CSS3 mas já é suportado por alguns navegadores, o valor da opacidade varia de 0 a 1 (utilizar valores decimais)
  • -moz-opacity: 0.70 – Declaração para servir navegadores do grupo Mozilla, o valor da opacidade varia de 0 a 1 (utilizar valores decimais)
  • filter: alpha(opacity=70) – Declaração para servir navegadores IE, o valor da opacidade varia de 0 a 100

HTML

	<img src="transparencia.jpg" class="transparencia" />

Aqui definimos a nossa imagem com um atributo class com valor “transparencia”, para que possamos identificá-lo através do CSS.

CSS

	.transparencia {
		opacity:0.70;
		-moz-opacity: 0.70;
		filter: alpha(opacity=70);
	}

O código CSS que irá aplicar a transparência em nossa imagem, esse código deve está inserido dentro da tag

Sem efeito de transparência:

Com efeito de transparência:

Bom divertimento!

Compartilhar

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

EuNaoSouNerd.com.br © 2010-2013 - Se for copiar, cite a fonte. Obrigado.