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
