Transparência na div afeta filhos

[Daniel Fernando 0]

Estou deixando uma div com transparência, mas esta afetando os elementos de dentro como texto e algumas imagens, estou usando os comandos clássicos.

 

opacity: 0.5;

filter: alpha(opacity=50);

 

Será que não tem como resolver este problema.

 

Ps. A transparência não pode ser com imagens.

[lucasmartins 6]

Meu caro,

 

tudo que conterá dentro dessa DIV também ficará transparente...

 

Qual é o seu objetivo em deixar a div transparente? assim poderei te ajudar melhor...

 

Abraços

[GabrielFerrari 41]

Não sei o que quer fazer.

Mas você se for uma simples transparência crie um PNG 1x1pixel com a quantidade de alpha que desejar.

Depois jogue ele como background da div :)

 

Mas cuidado pois se tiver algum elemento abaixo dele vai ficar transparente também.

 

Poste o link ou imagem do seu problema assim podemos ver qual a melhor solução para o seu caso.

[Thiago Retondar 18]

Se não puder usar imagens, vai ter que criar um div só para servir como background. Pode também usar RGBA que ainda é obsoleto entre os browsers.

 

De uma pesquisada sobre esse assunto. Já foi bastante debatido aqui. ;)

 

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

[Daniel Fernando 0]

O fundo do meu site é uma imagem, acima deste tenho uma div que esta com a transparência e dentro desta div tenho outras divs com textos e imagens, ou seja, a intenção é que o fundo fique visível. Mas esta afetando também o texto e as imagens, isso não poderia ocorrer.

 

Vou pesquisar sobre o RGBA, obrigado.

[Thiago Retondar 18]

Tenha em mente que o RGBA é bem obsoleto, como eu disse.

 

O melhor seria usar uma imagem já com transparência. ;)

 

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

[lucasmartins 6]

O fundo do meu site é uma imagem, acima deste tenho uma div que esta com a transparência e dentro desta div tenho outras divs com textos e imagens, ou seja, a intenção é que o fundo fique visível. Mas esta afetando também o texto e as imagens, isso não poderia ocorrer.

 

Vou pesquisar sobre o RGBA, obrigado.

 

A melhor maneira de você fazer isso, é com a PNG mesmo... você disse que não pode ser com imagem... mas se não for não tem como...

 

Faça um PNG da cor que você quiser... e deixe ele com 70% de opacidade e veja se o resultado te agrada...

 

Não creio que haja outra maneira que te ajude...

 

Abraços

[Thiago Retondar 18]

lucas,

 

há outras soluções sim, sendo que as mesmas já foram apresentadas no posts acima. ;)

 

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

[lucasmartins 6]

lucas,

 

há outras soluções sim, sendo que as mesmas já foram apresentadas no posts acima.

 

 

Não, não há outras soluções que ajude eficientemente o Daniel Fernando, pois todas as outras maneiras, fora a do PNG com alpha, são obsoletas. E eu estou aconselhando-no a fazer o que eu faço, e o que eu ainda acho que é o melhor a fazer...

 

Principalmente, por que o Internet Explorer não suporta atualmente o CSS3... ele terá problemas, a não ser que o público dele utilizam especificamente o Safari ou Firefox... obviamente é mto dificil isso acontecer...

 

E pelo que eu saiba o RGBA é um recurso novo no CSS na versão 3.

 

Abraços!

[Thiago Retondar 18]

Sim. Foi isso que eu disse no post #4 e #6. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

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

[lucasmartins 6]

Sim. Foi isso que eu disse no post #4 e #6.

 

 

eh ... to meio com sono hoje!!

 

Mas eu só quis ressaltar que se ele não utilizar o PNG... ele vai estar meio limitado quanto ao browser mais utilizado. Por isso quis dizer ue a única maneira de fazer é essa... é a melhor opção... não tem oq fazer...

 

Abraços

[Thiago Retondar 18]

Sim... Realmente o jeito é o PNG transparente. :D

 

Vamos esperá-lo agora para saber qual solução irá utilizar. ^_^

 

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

[Daniel Fernando 0]

Caramba, o assunto rendeu hein, :P . Ainda não testei o RGBA porque meu tempo está escasso, acho que só no fim de semana. Parece que esse sistema não funciona no IE, né, não existe nenhum hack pra fazê-lo funcionar?

 

Quanto ao PNG, eu já utilizei em outros sites e realmente é o melhor sistema, tem até um js que faz com que funcione em todos os navegadores, é bem legal, mas nesse caso específico não poderia ser com png, a não ser que não exista realmente outra opção.

 

Obrigado pelas respostas http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[lucasmartins 6]

 

[...]

 

Quanto ao PNG, eu já utilizei em outros sites e realmente é o melhor sistema, tem até um js que faz com que funcione em todos os navegadores, é bem legal, mas nesse caso específico não poderia ser com png, a não ser que não exista realmente outra opção.

 

[...]

 

 

 

Mas você não poderia dizer o porq não pode usar o PNG??

 

Cara, pra falar verdade tem outra maneira, eu nunca fiz porque sempre uso PNG, mas pode tentar:

 

Você pode criar algo como:

 

<head>
<style type="text/css">
.transp { width: 200px; height: 100px; z-index: 0; position: absolute; }

#conteudo { width: 200px; height: 100px; z-index: 1; position: absolute; }
</style>
</head>
<!-- Essa div transp, vai ser uma div com as mesmas dimensões da div conteudo. Porém, ela ficará com z-index para "0" e a conteúdo para "1" no CSS. -->
<div class="transp"></div>

<div id="conteudo"
<!-- aqui vai o conteúdo da div que ficará "transparente". -->
</div>

 

Daí na div .transp você faz o q estava fazendo no começo.

 

Abraços

[Thiago Retondar 18]

Se não der para usar mesmo PNG, use o último post do Lucas como base. Todas as soluções que eu sei para isso já foram dadas. :D

 

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