Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

petter

Fazer fundo da div ficar translucido.

Por , em Desenvolvimento frontend

Recommended Posts

petter    0

petter
Postado

Pessoal já vi uma vez uma camada com o fundo translucido, tinha uma cor e fica mostrando um pouco esmaecido o div que ficava por baixo desse primeira. Isso era feito com CSS (não era usado imagem nem nada).Alguém sabe como fazer?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Somente opacity não funciona no Firefox. :rolleyes:

 

OPACIDADE NA DIV

http://www.mxstudio.com.br/forum/index.php...mp;#entry142829

Da uma lida no último post do tópico. (Ja ta ancorado pra ele)

 

OPACIDADE COM PNG

E uma outra forma agora eu to achando melhor é essa.

http://forum.imasters.com.br/index.php?sho...=0&p=772039

 

To achando a do PNG melhor.. primeiro porque é mais facil de fazer o polpa gambiarras com códigos.

 

E segundo que da pra deixa o fundo transparente e o texto de dentro da div ou tabela com opacidade normal.

 

Coisa que com opacity é impossivel, a não ser que se faça um código pra poder deixar uma div por cima da outra transparente.

 

Mas se for pra usar em submenu se iria apanhar de mais.

 

 

Por isso agora so 100% PNG

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado 
filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;

Compartilhar este post

Link para o post
Compartilhar em outros sites

petter    0

petter
Postado

Pessoal valeu está funcionando beleza com a excessão de que a div de overlay fica do tamanho da div que centraliza o site, explicando melhor:Tenho uma div que centraliza o site que tem o seguinte código:

#tabela{position: absolute;top: 0%;left: 50%;margin-left: -387px;height: 485px;}

E a div de overlay (opacidade) tem o seguinte código:

#bodyOverlay{ background-color: #000;top: 0;left: 0;width: 100%;height:100%;filter:alpha(opacity="50");-moz-opacity: 0.5;opacity: 0.5;z-index:500;}

Quando eu disparo a div de overlay gostaria que ela tivesse a área total da tela do usuário e não somente o tamanho da div de centralização do site.Se alguém puder ajudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Cara, eu fiz isso no site da empresa que trabalho.

http://www.contactonet.com.br/?cont=portifolio

 

Só clicar no item do portifolio que se ve.

 

Cara, eu lembro que eu joguei esse js que fiz.

 

function createTable(){	var altura = '';	var largura = '';	altura = document.body.scrollHeight;	largura = document.body.scrollWidth;		document.getElementById('transparente').style.height = altura;	document.getElementById('transparente').style.width = largura;		var redimenciona = '<img src="imagens/img.gif" width="30" height="'+altura+'">';			document.getElementById('transparente').innerHTML = redimenciona;	}

Essa imagem era um gif transparente pra evitar bug em alguns navegadores.

 

Aeee é só colocar o comando no body

<body onload="createTable()">

E a div no código

<div id="transparente"></div>

Ja era...

 

Aqui funcionou legal com esse CSS aqui.

#transparente {	position:absolute;				left:0;			top:0;	width:100%;	visibility: hidden;		background-color:#000;		z-index:10;				filter:alpha(Opacity=80);	-moz-opacity : 0.8;	opacity: .8;	}

Tenta ae.. qualquer coisa da uma fuçada no código http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Flwww

Compartilhar este post

Link para o post
Compartilhar em outros sites

petter    0

petter
Postado

Cara estou tentando aqui mas está complicado, como você chamada isso. No meu caso eu chamo da seguinte forma: Quando o cara clica no link faço isso:

if (controle == true) {document.getElementById("erroLayer").style.display = "block";document.getElementById("erroLayer").innerHTML = conf;document.getElementById("bodyOverlay").style.display = "block";controle = false;return false;}

Onde o bodyOverlay é a camada de overlay. Usando o seu exemplo nem abre nada. Eita negocinho chato de se fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Nossa... num entedi o que se ta tentando com isso??? oO'Se tem idéia do que esse javascript ta fazendo??E que variavel controle é essa?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

heheh, beleza... mas se foi dessa forma que você postou esse javascript...Posta o código aee pra ver como é!!!!=)

Compartilhar este post

Link para o post
Compartilhar em outros sites

petter    0

petter
Postado

Vamos lá por partes, como diria Jack o Estripador: http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

Código CSS:

#bodyOverlay{ position:fixed; left:0; top:0;width:120%;height:120%; background-color:#000000; z-index:500; filter:alpha(Opacity=60);-moz-opacity : 0.6;}
Código no HTML (observe que fica "invísivel" quando carrega a página):

<div id="bodyOverlay" style="display:none"></div>
Agora quando o usuário utiliza o meu formulário e algum campo está errado na validação do Javascript ele carrega o overlay da seguinte forma:

if (controle == true) {document.getElementById("erroLayer").style.display = "block";document.getElementById("erroLayer").innerHTML = conf;document.getElementById("bodyOverlay").style.display = "block";controle = false;return false;}
Essa var controle é para indicar que teve algum campo do meu formulário inválido, não vou postar todo o código pois não faz parte.

Depois faço um link para fechar o overlay da seguinte forma:

<a href=java script:closeLayer() class=erro>Corrigir</a>
A função chamada aí em cima é a seguinte:

function closeLayer(){document.getElementById("bodyOverlay").style.display = "none";}
Basicamente é isso, espero que ajude alguém.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mariel    0

Mariel
Postado

gente, eu consegui deixar a camada transparente, bonitinha. só que ela funciona como popup e tem uma imagem de publicidade dentro que também fica opaca, se confundindo com o fundo (o site).

tentei tbm fazer um style pra imagem, mas nao deu certo.

como resolver isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mariel    0

Mariel
Postado

gente, eu consegui deixar a camada transparente, bonitinha. só que ela funciona como popup e tem uma imagem de publicidade dentro que também fica opaca, se confundindo com o fundo (o site).

tentei tbm fazer um style pra imagem, mas nao deu certo.

como resolver isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sem nada de código realmente fica dificil saber onde está o problema..

Coloque um link...

 

Algo com 100% de opacidade é algo opaco. Ou seja, 0% transparente.

 

opaco(a) - o.pa.co

adj (lat opacu) 1 Que não é transparente. 2 Coberto de sombra. 3 Obscuro, sombrio. 4 Turvo. 5 Denso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

acho que entendi o que Mariel quer dizer!!!

 

colocar uma div dentro da outra só que a de dentro não ficar opaca!!!

 

num deu para explicar direito

 

mas vamos tentar

 

 

<style>
#div1{
   opacity: 0.5;
   filter: alpha(opacity=50);
   background-color: Green;
   width: 500px;
   height: 500px;
   /* só para funcionar no IE e no FF */
}

#div2{
   /*nao ficar opaca*/
   opacity: 1;
   filter: alpha(opacity=100);
   background-color: Red;
   width: 300px;
   height: 300px;
}  
</style>
<div id="div1"> 
	<div id="div2"></div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

corrigindo!!!!!

 

<style>
#opaca{
	position: relative;
}
#div1{
   opacity: 0.5;
   filter: alpha(opacity=50);
   background-color: Green;
   width: 500px;
   height: 500px;
   position: absolute;
   top:0;
   left:0;
   z-index: 1;
   /* só para funcionar no IE e no FF */
}

#div2{
   /*nao ficar opaca*/
   opacity: 1;
   filter: alpha(opacity=100);
   background-color: Red;
   width: 300px;
   height: 300px;
   position: relative:
   z-index: 999;
}  
</style>


<div id="opaca">
	<div id="div2"></div>
	<div id="div1"></div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mariel    0

Mariel
Postado

opa parece q deu certo rapaz.

somente precisei colocar a div2 dentro da div1.

 

mto obrigada! =)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Programador704    0

Programador704
Postado

Estou com uma duvida, apliquei isso no meu site e deu tudo certo, mas as informações que estão dentro da div também fica com o efeito, ou seja, ela também fica opaca, como faço para que isso não ocorra?

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

@Programador704, esse tópico é de 2007. Hoje, com a evolução do CSS, não há necessidade da aplicação de filtro e/ou opacidade, mas pode usar o fundo com camada alpha (RGBA ou HSLA) diretamente na propriedade background. Estude:

http://www.w3.org/TR/css3-color/

https://css-tricks.com/rgba-browser-support/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito