Ir para conteúdo

POWERED BY:

Arquivado

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

Vadio

Opacidade CSS (alpha)

Por , em Desenvolvimento frontend

Recommended Posts

Vadio    13

Vadio
Postado

Pessoal, estou com um probleminha.. lol..

seguinte: tenho o filtro de alpha funciona direitinho q é pra deixar a div com tal coisa.. mas só o fundo é pra ficar com o alpha as letras não...

alguém me da uma mão em como mudar isso?

segue código:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IBM - Students Embassadors DB2::UniFAE Brasil</title>
<style type="text/css">
<!--
#container {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-attachment: fixed;
	background-image: url(images/fundo_01.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 600px;
	width: 800px;
}
#logo {
	background-image: url(images/logo_01.png);
	height: 102px;
	width: 250px;
	clear: right;
}
body {
	display: block;
	margin: 0px;
	background-position: center top;
}
#bloco #container #menu {
	background-image: url(images/fundoMenu_03.png);
	background-repeat: repeat-x;
	height: 30px;
	  Filter: Alpha(Opacity=30); 
	  -moz-opacity: 0.5;
	  opacity:0.40;
}
#bloco #container #menu #menuConteudo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #333333;
	background-position: right;
	  Filter: Alpha(Opacity=100); 
	  -moz-opacity: 1.0;
	  opacity:1.00;
}
-->
</style>
</head>

<body>
 <div id="container">
  <div id="logo">
  </div>
  <div id="menu">
   <div id="menuConteudo">asdasdasdasd</div>
  </div>	
 </div>
</body>
</html>

Se quiserem me dar dicas com relação a CSS estou a ouvidos tbm =D

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mesmo com o código que você postou, não consigo vizualizar pq não tenho as imagens..

 

Mas uma vez fiz exatamente isso que você tá querendo, e para que o texto sobre a imagem transparente não fique transparente tb.. eu posicionei uma DIV ABSOLUTAMENTE sobre a DIV transparente.

Ai o fundo tinha opacidade(30% no meu caso), e o texto era opaco.

 

#opaco {
	top: 20px;
	left: 25px;
	width:auto; 
	position:absolute; 
}
#filtro {
	background: #000; 
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	opacity:0.30; -moz-opacity: 0.30;
	-khtml-opacity: .30;
	width: 500px; height: 450px;
	position: absolute;
	top: 20px; left: 15px;
} 

...


<div id="filtro"></div>
<div id="opaco">
conteudo da DIV opaca
as DIVs se sobrepõe por causa do CSS, por isso não coloquei uma dentra da outra.
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

Para isso você deve usar PNG transparente

http://forum.imasters.com.br/index.php...mp;#entry991617

 

=)

Obrigado por responder, mas... você viajo legal na minha dúvida..

to falando de transparencia de div e ao aplicar o filtro da transparencia todo conteúdo de dentro dela também fica transparente. oque não é pra acontecer..

de qualquer forma... obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

Mesmo com o código que você postou, não consigo vizualizar pq não tenho as imagens..

 

Mas uma vez fiz exatamente isso que você tá querendo, e para que o texto sobre a imagem transparente não fique transparente tb.. eu posicionei uma DIV ABSOLUTAMENTE sobre a DIV transparente.

Ai o fundo tinha opacidade(30% no meu caso), e o texto era opaco.

 

#opaco {
	top: 20px;
	left: 25px;
	width:auto; 
	position:absolute; 
}
#filtro {
	background: #000; 
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	opacity:0.30; -moz-opacity: 0.30;
	-khtml-opacity: .30;
	width: 500px; height: 450px;
	position: absolute;
	top: 20px; left: 15px;
} 

...


<div id="filtro"></div>
<div id="opaco">
conteudo da DIV opaca
as DIVs se sobrepõe por causa do CSS, por isso não coloquei uma dentra da outra.
</div>

boa saída! não tinha pensado nisso..

dúvida ao deixar pos. absoluta se eu rolar a página ela vai subir junto ou vai ficar fixa?

 

desculpe so nb em css

e agora q to querendo fazer páginas 100% dinamicas to me batendo um monte pra aprender isso..

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Vai subir junto sim...

o FIXED que faria ela ficar "parada" na pagina...

 

tudo depende de "em relação à quem", está se posicionando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Para isso você deve usar PNG transparente

http://forum.imasters.com.br/index.php...mp;#entry991617

 

=)

Obrigado por responder, mas... você viajo legal na minha dúvida..

to falando de transparencia de div e ao aplicar o filtro da transparencia todo conteúdo de dentro dela também fica transparente. oque não é pra acontecer..

de qualquer forma... obrigado

 

Viajei não o que postei tem o mesmo efeito.

 

A não ser que você queria fazer esses "Fadeblack" em todo o site como fiz aqui para mostrar o texto numa div superior como é o caso de quando você clica no item do portifólio http://www.contactonet.com.br/?cont=portifolio

 

Para esses casos de "Fade Black" beleza,

 

Agora se você quer o fundo da div fique transparente de dentro dessa div o texto fique em cores normais a melhor forma é com PNG transparente.

 

Porque se você for uma div flutuante para "fingir" que está por cima acredite você terá grandes problemas pq a do fundo não irá acompanhar e sempre que você quiser fazer parecer real terá de ficar ajsutando o tamanho.

 

Nesse mesmo site que passei clica no segundo site Reciclanip

(o topo do site é administravel se num vai ver o topo do site como ve na miniatura que está no site pq na certa o cliente fez algo de errado)

 

Mas se você for ver ai também eu utilizei transparencia e foi com PNG

 

http://www.reciclanip.com.br/imagens/fundo_tribal.jpg

http://www.reciclanip.com.br/imagens/fundo_baixo.jpg

 

Repare que o box com o titulo Destaques é transparente (só comparar com o fundo que mandei agora)

 

E repare tb que o botão quem somos e os outros do menu tb são transparentes, pq você consegue ver de leve o efeito do fundo passando pelo desenho, até o efeito do rodapé você ve la em baixo do slide show.

 

http://www.reciclanip.com.br/?cont=press_r...erno&id=354

Veja o titulo aqui meio esbranquiçado

 

Ou a pagina de associados

http://www.reciclanip.com.br/?cont=quemsomos_associadas

 

Tudo usando essa técnica....

hehehhe, ta vendo num viajei legla não ^^

 

Da uma lida direito que se consegue fazer, é facinho.

 

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

 

 

-----

 

Apropósito, o conteudo fica transparente porque a "Div pai" afeta todos da div filho, você não consegue voltar ao estado de 100% de opacidade nesses casos porque na verdade os textos ja estão 100%, mas a div pai que manda em todos.

 

Por mais que o conteudo esteja com 100%

 

Não adianta nem você forçar o 100% no texto de dentro que não vai adiantar,

 

A div pai que comanda tudo, as divs internas vão agir de acordo com a div pai.

 

 

POR EXEMPLO:

 

<div id="pai">
	   <div id="filho"></div>
</div>

Se você der um position absolute na div pai e mover ela para qualquer lugar essa divi filho irá junto.

 

Tudo que estiver contido em pai será afetado, e é isso que acontece com o opacity, não tem como você mover a pai sem que a filho seja afetada.

(talvez com position absolute isso seja possivel não testei, mas não há alternativa para o opacity)

 

Sendo assim a única forma de fazer isso sem PNG é a pai e a filho sendo separadas, assim cada uma teria suas propriedades e valores diferentes.

 

Mas ocorre aquele problema que citei, fundo não irá acompanhar o conteudo e toda a hora você terá de ficar alterando a altura no css para reajustar.

 

E como eu disse PNG transparente faz justamente isso que você está querendo.

 

Flw aee

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