Jump to content


Photo

Transparencia No Fundo Da Div No Ie E Firefox


  • Faça o login para participar
6 replies to this topic

#1 Vitor_loko

Vitor_loko

    Perguntador profissional

  • Usuários
  • 176 posts
  • Sexo:Não informado

Posted 25/10/2006, 09:18

Olá,

Eu to com um pequeno Problema, gostaria de Saber como eu Aplico uma transparencia só no Fundo de Uma div, sem se aplicar as figuras e a o que está escrito dentro delas e como fazer um degradè linear só que Vertical?

Se quiserem aí vai o Código.

Primeiro o HTML


<!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=iso-8859-1" />
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="./ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->
<title>Músicas</title>
<link href="skin/default/css/musicas_talentos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="[b]Geral[/b]">
	<div id="Midia">
		
	</div>
	<div id="Lista">
	  <ul>
		<li class="m1">1. Wheels Of Life 
		<div class="topVideo"><a href="#" ><img src="skin/default/imagens/video-trans.gif" alt="" /></a></div>
		<div class="topFone"><a href="#" ><img src="skin/default/imagens/fone_som-trans.gif" alt=""  /></a></div>
		<div class="topLetra"><a href="#" ><img src="skin/default/imagens/papel-trans.gif" alt=""  /></a></div>
		<div class="topMais"><a href="#" ><img src="skin/default/imagens/mais-trans.gif" alt=""  /></a></div>
		</li>
		<li>2. We Know  
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>3. Menino 
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>4. New Life 
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>5. Burning Luv 
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>6. Nu 
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>7. Diz
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>8. Lotta Luck
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>9. Sentido
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		<li>10. Lá No MaR
		<div class="topVideo"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		<div class="topFone"><img src="skin/default/imagens/fone_nada-trans.gif" alt=""  /></div>
		<div class="topLetra"><img src="skin/default/imagens/papel-trans.gif" alt=""  /></div>
		<div class="topMais"><img src="skin/default/imagens/pixel.gif" alt=""  /></div>
		</li>
		</ul>
	</div>
</div>
</body>
</html>


Agora o CSS

body{
	margin: 0 auto;
 	color:#FFFFFF;
	}
img{ border:0 solid #000000;}
#Geral{
	width:530px; 
	background:#0B2E6A;
	[b]filter: alpha(opacity=70,FinishOpacity=0, style=1);[/b]
	margin:0 auto;
	height:248px;
	}
#Midia{ 
	background-image:url(../imagens/fundo_midia-trans.png);
	float:left; 
	width:290px;
	height:228px; 
	margin-top:7px;
	margin-left:4px;}
#Lista{
	width:228px;
	height:228px; 
	margin-top:7px; 
	float: right;}
#Lista ul{
	list-style:none; 
	margin-left:10px;
	font-size:11px;
	color:#07CDFD;}
#Lista li{display:block;  line-height:21px; line-height:21px;  width:200px; border-bottom:1px dotted #07CDFD;}

li.m1{color:#FDB901;}
li div{width:11px; height:10px;  float:right; margin-top:-13px;clear:both;}
div.top10 { margin-right:50px; }
div.topVideo { margin-right:24px;}
div.topFone {margin-right:16px;}
div.topLetra {margin-right:8px;}
div.topMais {margin-right:0px;}


Agradeço
Vitor
http://www.nerddisse.com - O Lado mais nerd da Internet
Twitter: www.twitter.com/vrleonel

#2 bdoweb

bdoweb

    Super Veterano

  • Usuários
  • 1641 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 25/10/2006, 09:23

olá amigo veja se isso te ajuda .... http://www.huddletog...jects/lightbox/
Quer ajuda seus amigo e ainda ganhar uma graninha?
Acesse agora mesmo http://yeapiz.com

#3 Vitor_loko

Vitor_loko

    Perguntador profissional

  • Usuários
  • 176 posts
  • Sexo:Não informado

Posted 25/10/2006, 09:49

Bem Cara, naum é Bem isso que eu quero... Quero Usar a Função Filter:alpha (opacity); em vez de usar imagens
Vitor
http://www.nerddisse.com - O Lado mais nerd da Internet
Twitter: www.twitter.com/vrleonel

#4 EduSystems

EduSystems

    Novato no fórum

  • Usuários
  • 9 posts
  • Sexo:Não informado

Posted 31/10/2006, 17:57

Eu to com dificuldade em usar transparências de qualquer tipo, pois uso o Dreamweaver e ele não dá muitas dicas pros comandos extras de CSS. Queria fazer uma <iframe> com fundo transparente pra não saturar na cor, como posso fazer usando Transparency? (Obs: no Dream aparece um monte de subcomando q naum sei se eh opcional ou naum)

Alguém pode me ajudar?

#5 _Samuca_

_Samuca_

    samuelmachado.com

  • Usuários
  • 1062 posts
  • Sexo:Masculino
  • Localidade:São Bento do Sul - SC

Posted 31/10/2006, 20:07

façam o fundo com uma imagem (.gif ou .png), pois esses filtros, na maioria das vezes só funcionam no IEca
--
Samuel Machado
www.samuelmachado.com

#6 Cristiano Galdino

Cristiano Galdino

    Dark Defender

  • Administradores
  • 3738 posts
  • Sexo:Masculino
  • Localidade:Brasília, DF

Posted 31/10/2006, 20:23

http://forum.wmonlin...howtopic=144277
Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”


#7 EduSystems

EduSystems

    Novato no fórum

  • Usuários
  • 9 posts
  • Sexo:Não informado

Posted 31/10/2006, 20:25

eu queria um quadro de cor lisa transparente, pra fikar um layout bem dez, tem como?




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq