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