Usando DIVs transparentes

[Gizmo 0]

Eu estou desenvolvendo um site que usa um fundo degradè, e eu queria que as divs ficassem transparentes para mostrar esse fundo.Depois de muito perambular por foruns, blogs e tudo que é site, finalmente eu consegui por a DIV transparente e o conteudo opaco em todos os browsers, incluindo o famigerado IE6.

 

Como forma de agradecimento ao iMasters que me ajudo no processo, to postando aqui a solução (existe algum topico aqui que fala do assunto, mas o código não funciona para background, sendo apenas pra PNG's postas no site).

 

Pois bem, ao que interessa então.

 

Abra o Photoshop/Fireworks e crie um png de 10x10 transparente (no meu caso eu usei 15% de opacity), salve o png com um nome (fundo.png).

 

Na tag HEAD do site, coloque:

 

<style type="text/css">
<!--
.alpha {
background-image: url(img/fundo.png);
width: 100%; }
-->
</style>
<!--[if IE]>
<style>
.alpha{
background-image: none;
background-color:#FFF;
	 filter: alpha(opacity=15);
}
</style>
<![endif]-->

Feito isso, para que a DIV fique transparente e o conteudo opaco, faça o seguinte:

 

<div class="alpha"><!--- div transparente --->
			<div class="opaco"></div><!--- div com conteudo opaco --->
   </div>

Agora no seu CSS

 

.opaco{height: 50px} /* atributos da div*/
.alpha .opaco {position: relative} /* isso é obrigatório, do contrario, o conteudo da div "opaco" também fica transparente no IE */

Espero que tenha ajudado um pouco http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[brcontainer 16]

bem falar a verdade o seu código num tem coerencia nenhuma

vou dizer por que.

Por que seu código tem coisa errada, falta virgula tem virgula extra

 

vou dizer num enetendi nada do teu código e nem pra que ele serve

vou te pergunta por acaso o que você quer é um DIV opaco tipo 15%

e o conteudo continue 100% sem transparencia??

 

é isso?

 

explica melhor

 

falow abraço

PS.: ISSO QUE VOU LHE FALAR É EXTREMAMENTE OBRIGATORIO

PONHA UM LINK PARA TESTARMOS OU PONHA UM EXEMPLO COMPACTADO COM TODOS OS ARQUIVOS

PARA TESTARMOS ;)

 

fico agradecido t+

[Leandro Senni 1]

um arquivo PNG no IE6 fica como sabe branco ou ruim... isso ai... faz o IE 6 ler o CSS com 15% e nao o PNG com 15%...

 

acho que é isso...

[brcontainer 16]

se for para fazer isso é melhor criar um JPG e aplicar como fundo e opacidade 15%

daria na mesma não é verdade?

.alpha {
background-image: url(img/fundo.jpg);
width: 100%;
filter: alpha(opacity=15);
opacity:.15;
-moz-opacity:.15;
-khtml-opacity:.15; 
}

assim terá o mesmo efeito e não necessitará de HAKCs

[Gizmo 0]

bem falar a verdade o seu código num tem coerencia nenhuma

vou dizer por que.

Por que seu código tem coisa errada, falta virgula tem virgula extra

 

vou dizer num enetendi nada do teu código e nem pra que ele serve

vou te pergunta por acaso o que você quer é um DIV opaco tipo 15%

e o conteudo continue 100% sem transparencia??

 

é isso?

 

explica melhor

 

falow abraço

PS.: ISSO QUE VOU LHE FALAR É EXTREMAMENTE OBRIGATORIO

PONHA UM LINK PARA TESTARMOS OU PONHA UM EXEMPLO COMPACTADO COM TODOS OS ARQUIVOS

PARA TESTARMOS ;)

 

fico agradecido t+

Desculpe se você não entendeu, pensei que tinha posto tudo de uma forma simples.O que acontece, é que o IE6 não tem suporte a transparência de PNG, então usando esse filtro tem-se o mesmo efeito nele.Porém sobre o conteúdo também é aplicado o filtro, então se coloca a div em relative.

 

Para os outros browsers que possuem esse suporte nativo, usa-se o PNG transparente.

 

Quanto a prova, ainda to desenvolvendo o site, quando for ao ar eu mando a url, mas funciona sim com todas as virgulas como estão.

 

 

se for para fazer isso é melhor criar um JPG e aplicar como fundo e opacidade 15%

daria na mesma não é verdade?

.alpha {
background-image: url(img/fundo.jpg);
width: 100%;
filter: alpha(opacity=15);
opacity:.15;
-moz-opacity:.15;
-khtml-opacity:.15; 
}

assim terá o mesmo efeito e não necessitará de HAKCs

JPG não é um formato que suporta transparencia.Se você usar o filtro alpha no Mozila, ele põe o conteudo transparente também.Se isso for o que você quer, não precisa por uma JPG de fundo, basta especificar a cor e a opacity.Meu objetivo é fundo transparente porém o conteudo não.

 

Espero ter esclarecido as duvidas

[brcontainer 16]

Agora sim está explicado é apenas o fundo opaco, sim foi uma boa ideia o que você fez ^^

 

porem ainda sim está errado:

filter: alpha(opacity=15);;

faça assim:

filter: alpha(opacity=15);

e

width: 100%}

faça assim:

width: 100%;}

pronto ^^ melhora já.

 

Mas mesmo assim obrigado pela tuto:

http://www.plugmasters.com.br/sys/materias...parente-com-CSS

 

esse é um exemplo do que você passou assim o pessoal entende melhor

abraço

[Gizmo 0]

Pronto, alterei as virgulas, eu já tinha notado que elas estavam assim, mas como funcionou do mesmo jeito não me importei de mexer.

 

Ahm, na verdade é apenas o fundo transparente e o conteudo opaco.

 

*Eu ja fui nesse site que você postou o link, e com esse código não me lembro se era o IE ou o Firefox que dava problema.

[Leandro Senni 1]

A opção de usa JPG com Opacidade é util nao tinha pensado nesta coisinha ainda,,, vlw...

[MVO 0]

Agora sim está explicado é apenas o fundo opaco, sim foi uma boa ideia o que você fez ^^

 

porem ainda sim está errado:

filter: alpha(opacity=15);;

faça assim:

filter: alpha(opacity=15);

e

width: 100%}

faça assim:

width: 100%;}

pronto ^^ melhora já.

 

Mas mesmo assim obrigado pela tuto:

http://www.plugmasters.com.br/sys/materias...parente-com-CSS

 

esse é um exemplo do que você passou assim o pessoal entende melhor

abraço

 

Apenas para deixa uma coisa mais clara...não é preciso usar ; no fim das declarações de classes, Ids etc no CSS.

O ultimo a tributo pode fica sem o pode sem o ; como no exemplo abaixo:

 

#menu{
  margin-top: 4px;
  width: 180px
}

 

Sendo assim

width: 100%}

tb esta certo.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif