Transparência em div.

[wills 0]

Bom dia pessoal!

 

Estou com um problema do qual tentei várias técnicas avançadas de programação - TAP (vulgo gabiarra).

 

Fiz um site no qual usa as propriedades em uma div para fazer transparência:

background:#f5f5f5;opacity:0.5;-moz-opacity: 0.5;filter: alpha(opacity=30);*/

o problema é que tudo que se encontra na div, fica com a mesma porcentagem da transparência, dificultando a leitura e mudando o visual do layout.

 

sabem como faço para apenas deixar a divi com transparência?

 

caso queiram visualizar...

 

http://www.4vconnect.com/

 

ps: a div se encontra abaixo porque não atualizei o site ainda.

[marcelrizzo 0]

Olha, eu não sei resolver não, mas aqui no meu FF a primeira página o texto está sem transparência, nas outras é que estão transparentes.Já no IE 7 até a primeira está transparente. Você reparou isso?falows

[wills 0]

marcelrizzo, é que fiz um imagem em png para ff... o problema é no ie...mas, não entendo o do ie7....como ficou, não testei ainda nele.alguém sabe como me ajudar com o e ie6 ae?

[RoXbY 3]

http://homepage.ntlworld.com/bobosola/

 

esse link explica como inserir imagens em png transparent.

 

ouuuuuuu isto abaixo na classe do objeto ;) abs!

 

filter='alpha(opacity=95)'; // IEopacity='0.95'; // FF

[Nícolas 4]

Cara ja me deparei com problemas como esse antes, mas esse é um problema que com essa técnica eu tentei achar uma solução e não consegui...

 

 

Porque apartir do momento que você define transparencia para a DIV pai.... todo o conteudo dela é afetado...

 

E se você chega numa div filha e da 100% de opacidade, não adianta, porque na verdade o conteudo esta como 100% mas a div pai quem controla tudo entendeu...

 

Bom, você pode fazer isso de duas formas.

 

Primeira, você cria uma div com o nome de transparencia e joga outra por cima (não dentro) dela.

 

 

A outra é usando png transparente como fundo.

http://forum.imasters.com.br/index.php?showtopic=223512

 

Da uma lida nesse tópico que postei que pode te ajudar bastante ;)

[wills 0]

cara,não entendi uma coisa no seu poste: essa transparência com png funfa no ie6?e, valeu, com as div´s funcionam ,mas para isso vai me dar mais trabalho...abração!

[Nícolas 4]

O IE 5 e 6 não aceitam png com fundos transparentes, ele sempre joga um fundo branco e deixa a imagem solida....

 

Ja o Firefox, Opera e agora o IE 7.. a aceitam png como fundo transparente.

 

 

Esse esquema que postei é para o IE 5 e 6 aceitarem as transparencias do PNG.

 

 

O javascript é caso você queria postar a imagem diretamente na tag <img>

<!--[if lt IE 7]>

<script defer type="text/javascript" src="pngfix.js"></script>

<![endif]-->

 

<img src="IMAGEM.png" width="300" height="35">

Agora o CSS

 

<style type="text/css">

<!--

.fundo {

background-image: url(IMAGEM.png);

background-repeat: repeat-y;

 

width: 100%; /*IMPORTANTE PARA EXEBIR O BACKGROUND PRECISA ESTAR COM UMA LARGURA E/OU ALTURA DEFINIDA */

}

-->

</style>

 

<!--[if IE]>

<style>

.fundo{

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=IMAGEM.png,sizingMethod='scale');

}

</style>

<![endif]-->

é pra colocar como imagem de fundo...

 

 

E não da mais trabalho não cara... basicamente é só você trocar o nome IMAGEM.png pelo nome da sua imagem transparente.

 

Se você demorar mais de 1 minuto pra implementar isso é muito....

 

 

Da uma olhada la que vale apena viu

 

:)

[crivo 0]

Brother... seguinte:Você pode trabalhar em camadas diferentes, dai o conteudo nao vai ser afeado com a transparenciapode ser +/- assim:

<div id="divPrincipal">   <div id="divTransparente">   </div>   <div id="divConteudo>    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ac pede.     Integer vel elit sit amet velit fringilla eleifend. Aliquam ut ante. Nulla varius      turpis eget neque   </div></div>

no CSS você faz o seguinte:

#divPrincipal{position:relative;}#divTransparente{---poe aqui sua transparencia --position:absolute;width:200px;height:200px;}#divConteudo{position:absolute;width:200px;height:200px;}

ps.: note q o tamanho da div divTransparente é sempre igual ao da div divConteudo.Outra coisa:PNG transparente ainda nao é suportada por alguns browsers, o efeito q você pode conseguir com um GIF tbm não é dos bons, a propriedade opacity realmente é a mais viavel por ser aplicavel a qualquer coisa, inclusive imagensespero ter ajudado.

[wills 0]

cara, vou te encher mais um pouco...

 

é que deu pau novamente, o png não ficou transparente....

 

eu utilizo folhas de estilos, não digito o css direto na página, será que este é o problema?

 

#conteudo{margin:58px 0px 0px 0px;_margin:55px 0px 0px 0px;float:right;width:292px;height:320px;_height:322px;background:url(../images/fundo1.png)  repeat-y;/*background:#f5f5f5;opacity:0.2;-moz-opacity: 0.2;filter: alpha(opacity=30);*/}<!--[if IE]>#conteudo{margin:58px 0px 0px 0px;_margin:55px 0px 0px 0px;float:right;width:292px;height:320px;_height:322px;background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/fundo1.png,sizingMethod='scale');}<![endif]-->

e, o js é para quando vamos atribuir a transparência direto na tag img, certo?

 

abraços!

[Nícolas 4]

é isso aee, o javascript é para a tag <img>

 

E deu pau pq você não pode jogar tudo isso dentro de um unico CSS.

 

Se for direto no código faz assim.

 

<style type="text/css">

<!--

#conteudo{

margin:58px 0px 0px 0px;

float:right;

width:292px;

height:320px;

background:url(../images/fundo1.png) repeat-y;

}

-->

</style>

 

<!--[if IE]>

<style type="text/css">

#conteudo{

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/fundo1.png,sizingMethod='scale');

 

/* ESSES SÃO SEUS HACKS DO ESTILO ACIMA */

margin:55px 0px 0px 0px;

height:322px;

 

}

</style>

<![endif]-->

Ou se não deixa em dois arquivos css separados

<link href="padrao.css" rel="stylesheet" type="text/css" />

 

<!--[if IE]>

<link href="padrao_ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

Aee nesse padrão IE você joga seus hacks (mas sem os underlines na frente)

 

Inclusive o background...

 

 

 

E você não precisava definir de novo os itens do #conteudo no CSS de baixo.

 

Que na verdade o que se ta fazendo.

 

 

Se ta definindo todos os seus estilos que serão lidos pelo navegador.

<style type="text/css">

<!--

#conteudo{

margin:58px 0px 0px 0px;

float:right;

width:292px;

height:320px;

background:url(../images/fundo1.png) repeat-y;

}

-->

</style>

Os estilos estão dados você não vai perder o valor....

 

O que você vai tar fazendo é simplesmente isso...

 

<!--[if IE]>

<style type="text/css">

#conteudo{

background-image: none;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/fundo1.png,sizingMethod='scale');

 

/* ESSES SÃO SEUS HACKS DO ESTILO ACIMA */

margin:55px 0px 0px 0px;

height:322px;

 

}

</style>

<![endif]-->

Você vai estar definindo novos valores e sobrescrevendo os valores antigos mas a condicional em negrito (<!--[if IE]> ...... <![endif]-->) fala que esses valores serão lidos somente pelo Internet Explorer tendeu...

 

 

E ele não le a condicional dentro do arquivo CSS porque é um código html saco.

 

 

Bom cara é isso, tenta aee agora, qualquer duvida posta aee

 

=]

[wills 0]

Então cara, entendi o que tu disse...

 

mas o problema é que meu css fica dentro do arquivo boxmodel.css

 

isso que eu quero saber como vou colocar esse if dentro dessa folha...

 

agora creio que fui claro, não?

 

abraços!

[Nícolas 4]

Então cara.. como eu disse essa condicional IF é um código html... por tanto NÃO DEVE ser adicionado dentro de uma folha de estilo e sim no próprio html.

 

O ideal seria você criar dois arquivos CSS

 

boxmodel.css e boxmodel_ie.css

 

 

Aeee você coloca no boxmodel.css

#conteudo{margin:58px 0px 0px 0px;float:right;width:292px;height:320px;background:url(../images/fundo1.png) repeat-y;}

E no boxmodel_ie.css

#conteudo{background-image: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/fundo1.png,sizingMethod='scale');/* ESSES SÃO SEUS HACKS DO ESTILO ACIMA */margin:55px 0px 0px 0px;height:322px;}

 

Ou seja vocês estará criando 2 folhas de estilo, uma para ser lida em todos os navegadores (boxmodel.css) e a logo depois uma só com os valores que o IE irá interpretar (boxmodel_ie.css))

 

 

Todos os seus hacks do boxmodel.css você pode jogar nesse boxmodel_ie.css...

 

Depois só você adicionar no seu html o código

 

<link href="boxmodel.css" rel="stylesheet" type="text/css" />

 

<!--[if IE]>

<link href="boxmodel_ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

Ele simplesmente vai estilizar todo o código no boxmodel.css para todos os navegadores.

 

E o IE vai ler o arquivo boxmodel.css e logo em seguida o boxmodel_ie.css.

 

 

 

Simplificando....

 

Ou seja, você não precisa adicionar todo o código do boxmodel.css no boxmodel_ie.css e mudar os valores...

 

O IE vai ler os 2, você adiciona no boxmodel_ie.css apenas os valores que você quer alterar, ou adicionar entendeu

 

=)

[Paulo de Tarso F. M. 24]

Só complementando o que nosso amigo nick171 está explicando a você, leve em consideração a maneira como o browser "lê" os arquivos: sempre de cima para baixo... O que vai acontecer aqui é justamente isso, da maneira que está:

<link href="boxmodel.css" rel="stylesheet" type="text/css" />

 

<!--[if IE]>

<link href="boxmodel_ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

Como ele falou, primeiro todas as formatações do arquivo boxmodel.css serão carregadas... Aí você tem esse comentário condicional, que só funciona no IE... Ou seja, para os browsers como FF, Opera e cia., tudo o que está aqui dentro:

<!--[if IE]>

<link href="boxmodel_ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

nada mais é do que um simples comentário de HTML... Só que o IE consegue entender que o que está ali dentro ele tem que usar, tem que interpretar... Dessa forma, imaginemos um outro exemplo, tenho um CSS assim:

div#box {	border: 1px solid #f00;	background-color: #ccc;}

Beleza, até aqui todos os browsers vão renderizar a borda da div com id "box" com a cor vermelha e com uma cor de fundo cinza... Aí digamos que no seu comentário condicional você coloque dessa forma:

<!--[if IE]>

<style type="text/css" />

div#box {

border: 1px solid #00f;

}

</style>

<![endif]-->

Aí nesse caso somente no IE a borda será renderizada com a cor azul, porque você definiu um novo estilo para a borda da div "box", e como esse comentário condicional vem depois do link com o arquivo CSS externo, no IE essa formatação será sobreposta... Lembre-se: sempre prevalecerá a última declaração... Se você tivesse isso aqui:

div#box {	border: 1px solid #f00;	border: none;}

De fato, sua div "box" não teria borda nenhuma, pois a última declaração é border: none... Agora, se você tivesse isso invertido:

div#box {	border: none;	border: 1px solid #f00;}

Aí sim, sua div teria uma borda vermelha, por a última declaração prevaleceu sobre a anterior...

 

Isso tudo é uma questão de compreensão da maneira como trabalha o browser, como ele interpreta o CSS, que o nome já diz: em cascata, onde sempre prevalecerá a última declaração na estrutura...

 

Bom, espero que tenha compreendido isso tudo... Qualquer coisa, volte a postar! Abraço!

[wills 0]

vou testar todos os posts...valeu galera!

[MOTACORP 0]

Amigos, estou com problema parecido e não consigo resolver, quero com png no background mas o link não funciona... http://new.iaene.br

 

#geral #esquerda .menu dd { margin:0px; padding:6px 0px 0px 0px; width:131px; height:19px; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/menu_verde.png,sizingMethod='none') no-repeat; text-indent:15px; }

 

#geral #esquerda .menu dt { margin:0px; padding:7px 0px 0px 0px; width:131px; height:19px; background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/menu_ccccc.png,sizingMethod='none') no-repeat; text-indent:10px;}

 

agradeço qualquer sugestão

[Nícolas 4]

Aeee Paulo.. boa explicação http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

 

Amigos, estou com problema parecido e não consigo resolver, quero com png no background mas o link não funciona... http://new.iaene.br

 

#geral #esquerda .menu dd { margin:0px; padding:6px 0px 0px 0px; width:131px; height:19px; background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/menu_verde.png,sizingMethod='none') no-repeat; text-indent:15px; }

 

#geral #esquerda .menu dt { margin:0px; padding:7px 0px 0px 0px; width:131px; height:19px; background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/menu_ccccc.png,sizingMethod='none') no-repeat; text-indent:10px;}

 

agradeço qualquer sugestão

Bom cara, vou postar pra você o código funcional PRA VOCÊ JOGAR DIRETO NO HTML... da uma lida no tópico inteiro que você vai entender oq ue fiz e porque fiz.

 

mas antes deixa eu comenta uma coisinha.

 

As partes que deixei em negrito não existe nesse filter.

http://msdn2.microsoft.com/en-us/library/ms532920.aspx

 

Primeiro que o no-repeat não existe nesse filter ele só pertence aos comandos background e background-repeat, o esquema de repetição vem do atributo que você da (no link que passei tem os atributos, crop, image, scale)

 

E o valor none tb não existe, você deve usar um dos atributos que falei agora.

 

 

Então cara, isso você joga direto no seu html depois do seus estilos.

 

<style type="text/css"><!--#geral #esquerda .menu dd { 	margin:0px; 	padding:6px 0px 0px 0px; 	width:131px; 	height:19px;	background: url(imagens/menu_verde.png) no-repeat;	text-indent:15px; }#geral #esquerda .menu dt { 	margin:0px; 	padding:7px 0px 0px 0px; 	width:131px; 	height:19px; 	background: url(imagens/menu_ccccc.png) no-repeat; 	text-indent:10px;}--></style><!--[if IE]><style type="text/css" />#geral #esquerda .menu dd { 	background-image: none; 	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/menu_verde.png,sizingMethod='image'); }#geral #esquerda .menu dt { 	background-image: none; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=imagens/menu_ccccc.png,sizingMethod='image'); }</style><![endif]-->

Da uma lida aee nos posts de cima que você ja vai entender o que fiz, porque fiz e como adicionar em folha de estilos isso aee...

 

Flw ;)

[wills 0]

Bom dia pessoal, só hoje consegui mexer no site e ver como ficou a transparência.

 

seguinte: a do nick171, não consegui acertar ainda para ie.

 

cara, se puder novamente me ajudar com esse código, fico feliz!

 

se quiser, posto como eu fiz parte a parte.

 

abraços!

[Nícolas 4]

Posta ele todo aee então velho.. facilita bastante...Posta o CSS e o html.;)

[wills 0]

nick171, desculpa a demora mas, não estava conseguindo postar nada, a página ficava dando erro.então, esse seu lançe ae parece ser bem mais fácil, mas ainda não entendi como funfa...se puder me add no msn ou skype para me ajudar, agradeço!abração!

[Nícolas 4]

To mandando meu msn pra você por MP...Mas só num acostuma não!!!"Meu Deus, eu tenho que ir pro céu!!!" hehehe=)