CSS3 - Transparência

Front-end

13/06/2013

Olá amigos, estou tentando colocar 30% de transparencia na DIV existente no meu exemplo a seguir, Para isso criei o seguinte código HTML referenciando a minha folha de estilo01, só que quando vou testar não vejo nenhuma transparencia.

Código HTML

<html>
<head>
	<title>Exemplo elemento com transparencia</title>
    <link href="estilo01.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="fundo_elemento">
    	Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
    </div>
</body>
</html>


Código CSS
body {
	background:yellow;
}
.fundo_elemento 
{
	background:rgba(152,152,152,30);
}
Walter Junior

Walter Junior

Curtidas 0

Respostas

Clóvis Neto

Clóvis Neto

13/06/2013

Olá amigo.

Veja bem para isso depende!

Caso você esteja querendo colocar a classe "fundo_elemento" e todos os seus elementos "filhos" com opacidade, colocariamos assim:

.fundo_elemento {
 background: rgb(152,152,152);
 opacity:0.5;
}


Agora se você quer deixar apenas a cor de fundo da class, com opacidade, colocamos assim:

.fundo_elemento {
 background: rgba(152,152,152,0.5);
}


Note que coloquei o 0.5, que é o que vai dar o tom da opacidade da nossa cor de fundo, se quiser ele totalmente invisivel, coloque 0 (zero), se quiser ele sem efeito de transparencia, coloque 1 (um) ou melhor coloque apenas rgb(152,152,152).

Caso ainda tenha dúvidas quanto ao assunto, é só responder que ficarei grato em lhe dar o feedback

Abraços, Clóvis Neto.
GOSTEI 0
José

José

13/06/2013

Exatamente como o amigo acima descreveu

0 é = 100% de transparência
1 é = 0% de transparência

Desse modo podemos dizer que

0.1 seja 10% de transparência
0.3 Seria os 30% como você deseja colocar.
0.5 50%
GOSTEI 0
Walter Junior

Walter Junior

13/06/2013

Hum entendi, quer dizer então que meu erro foi apenas ter posto "30" ao invés de "0.3".
Obrigado pela ajuda amigos.
GOSTEI 0
Clóvis Neto

Clóvis Neto

13/06/2013

Hum entendi, quer dizer então que meu erro foi apenas ter posto "30" ao invés de "0.3".
Obrigado pela ajuda amigos.


Exato! =D
GOSTEI 0
Walter Junior

Walter Junior

13/06/2013

Eu andei lendo através de algumas buscas no Google, que esse efeito de transparência, pode ser utilizado em alguém elemento que possua o atributo Background, é isso mesmo ?
GOSTEI 0
Clóvis Neto

Clóvis Neto

13/06/2013

Eu andei lendo através de algumas buscas no Google, que esse efeito de transparência, pode ser utilizado em alguém elemento que possua o atributo Background, é isso mesmo ?


sim. Desde que o mesmo aceite a proprieade rgba() =D
GOSTEI 0
Walter Junior

Walter Junior

13/06/2013

Esse mesmo código que utilizei para por transparência na DIV, serviria também para uma imagem.
ou para isso eu teria que fazer alguma alteração nesse código ?
GOSTEI 0
José

José

13/06/2013

Esse mesmo código que utilizei para por transparência na DIV, serviria também para uma imagem.
ou para isso eu teria que fazer alguma alteração nesse código ?


Olá Walter para imagem você utiliza a propriedade opacity e filter.
Vou lhe dar uma breve explicação de cada uma.

Opacity = Esta por sua vez define a transparência da imagem, e atribuirmos um valor a ela de 0.1 a 1.0 sendo que quanto menor o valor maior será a transparência da imagem.

Ex: 
img{
 opacity:0.3;
}


A uma observação importante é que Opacity é um dos novos recursos do CSS 3 e não é suportado por todos os navegadores. Por esse motivo usamos junto a propriedade filter.

filter = Tem a mesma função que a Opacity, para alterarmos o nível de transparência da imagem usamos um valor de 0 a 100 quanto menor o valor maior será a transparência obtida. E está propriedade é usada para o Internet Explorer.

Ex: 

img{  
 filter:alpha(opacity=30);
}


Para evitar incompatibilidade entre os navegadores é recomendado utilizamos as duas juntas, da seguinte forma.

Ex: 
img{ 
opacity:0.7;
 filter:alpha(opacity=70);
}


Espero ter lhe ajudado.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

13/06/2013

muito bom o post
GOSTEI 0
José

José

13/06/2013

muito bom o post

Concordo com você Marcelo, um post bem interessante.
Ainda mais por se tratar de uma propriedade nova do CSS
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

13/06/2013

CSS pra quem ta começando é complicado, pelo menos eu acho.
GOSTEI 0
Clóvis Neto

Clóvis Neto

13/06/2013

CSS pra quem ta começando é complicado, pelo menos eu acho.


É apenas uma questão de prática =D
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

13/06/2013

é, praticando!!!
GOSTEI 0
José

José

13/06/2013

Em minha opinião acho que tudo vem em torno de teoria e prática.
pois não adianta de nada conhecer na teoria e não saber por em prática.
e também não adianta querer por algo em prática, que você não tenha o conhecimento teórico.
GOSTEI 0
Walter Junior

Walter Junior

13/06/2013

Obrigado pela ajuda de todo. Todas as respostas foram de grande utilidade.
podem oncluir o tópico por gentileza.
GOSTEI 0
José

José

13/06/2013

Valeu Walter, estamos aqui pra ajudar. Sinta-se a vontade para iniciar novos tópicos.
Estou marcando este tópico como concluído.
GOSTEI 0
POSTAR