15
Estoy haciendo un sitio web para un proyecto escolar, y actualmente tengo un pequeño problema ... No puedo hacer que el fondo del cuerpo sea transparente sin que también afecte al contenido del mismo.¿Cómo puedo hacer que el fondo de mi sitio web sea transparente sin hacer que el contenido (imágenes y texto) también sea transparente?
Aquí está mi código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>text</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="head">
</div>
<div id="wrapper">
<ul id="nav">
<li><a href="index.htm">Inicio</a></li>
<li><a href="sobre.htm">Sobre a banda</a></li>
<li><a href="membros.htm">Membros</a></li>
<li><a href="bilhetes.htm">Bilhetes</a></li>
<li><a href="galeria.htm">Galeria</a></li>
<li><a href="areapessoal.php">Área Pessoal</a></li>
</ul>
<h1><a href="index.htm"><img src="images/a7x-avenged-sevenfold-7050435-1024-831.jpg" width="130" height="25" alt="Rock Band" /></a></h1>
<div id="body">
<div id="bodyi">
<div id="bodyj">
<div id="sidebar">
<div class="content">
<h2>Galeria de imagens</h2>
<p>Aqui poderá encontrar uma galeria de imagens da banda, com fotos de concertos,
<img src="images/denmark.jpg" width="91" height="72" alt="" />
entre outras imagens.</p>
<p class="readmore"><a href="galeria.htm">Ver</a></p>
</div>
<div class="content">
<h2>Noticias</h2>
<h3>18 de Abril, 2011</h3>
<h4>"So Far Away" vai ter videoclip</h4>
<p>Muitos se questionavam se o mais recente single dos Avenged Sevenfold, "So Far Away", ia ter direito a um videoclip. Eis que surge a boa notícia para os fãs dos A7X: So Far Away vai ter videoclip.
<img src="images/63781127.jpg" width="95" height="73" alt="pic 3" />
Já foram divulgadas algumas fotos do set de filmagens.</p>
<h3>10 de Março, 2011</h3>
<h4>A7X nomeados para a Metal Hammer Golden Gods Awards 2011</h4>
<p>Os Avenged Sevenfold foram nomeados para a Metal Hammer Golden Gods Awards 2011 em duas categorias.
As categorias onde os A7X estão a participar são as seguintes:<p>
- Best International Band (Melhor Banda Internacional)<p>
- Best Shredder (com o Synyster Gates) (Melhor Shredder)</p>
</div>
</div>
<div id="content">
<center><img src="images/avengeds.jpg" width="346" height="234" alt="four men walking" /></center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" width="82" height="80" alt="Unwired album cover" class="left" />
<p>Os californianos Avenged Sevenfold estão de volta aos discos com "Nightmare". Solos de guitarra, vocalizações rasgadas e um som contagiante continuam a ser a base do sucesso de uma das bandas de heavy-metal com mais fãs no mundo inteiro.
Fundados em 1999 por M. Shadows, Synyster Gates, Zacky Vengeance, Johnny Christ e The Rev - baterista que faleceu em Dezembro de 2009 passado e que foi substituido neste disco por Mike Portnoy, dos Dream Theater - os Avenged Sevenfold já contam com cinco discos de originais na sua carreira.</p>
<div class="divider"></div>
<h2>Musicas com maior sucesso</h2>
<table summary="track downloads" border="0" cellspacing="0">
<tr>
<th width="55%">Faixa</th>
<th>Album</th>
<th class="hidden">Dowload links</th>
</tr>
<tr>
<td>Bat Country</td>
<td>City of Evil</td>
<td class="download"><a href="http://www.youtube.com/watch?v=IHS3qJdxefY">Ouvir</a></td>
</tr>
<tr>
<td>Beast and the Harlot</td>
<td>City of Evil</td>
<td class="download"><a href="http://www.youtube.com/watch?v=7bDg7n-chhU">Ouvir</a></td>
</tr>
<tr>
<td>Seize the Day</td>
<td>City of Evil</td>
<td class="download"><a href="http://www.youtube.com/watch?v=jUkoL9RE72o">Ouvir</a></td>
</tr>
<tr>
<td>Almost Easy</td>
<td>Avenged Sevenfold</td>
<td class="download"><a href="http://www.youtube.com/watch?v=Fi_GN1pHCVc">Ouvir</a></td>
</tr>
<tr>
<td>Afterlife</td>
<td>Avenged Sevenfold</td>
<td class="download"><a href="http://www.youtube.com/watch?v=HIRNdveLnJI">Ouvir</a></td>
</tr>
<tr>
<td>Nightmare</td>
<td>Nightmare</td>
<td class="download"><a href="http://www.youtube.com/watch?v=94bGzWyHbu0">Ouvir</a></td>
</tr>
<tr>
<td>Welcome to the Family</td>
<td>Nightmare</td>
<td class="download"><a href="http://www.youtube.com/watch?v=1OZs7IoWTvc">Ouvir</a></td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div align="right">
<font size="2">text</font>
</div>
</div>
</body>
</html>
Y aquí está el código CSS:
.head{
width: 150px;
height: 160px;
}
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 12px;
text-align: center;
background: #000;
color: #ddd4d4;
padding-top: 12px;
line-height: 2;
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
td, th {
font-size: 12px;
text-align: left;
line-height: 2;
}
#wrapper {
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
}
#body {
background: url(images/body_bg_1.gif) repeat-y;
width: 832px;
}
#bodyi {
background: url(images/body_top_1.gif) no-repeat;
width: 832px;
}
#bodyj {
background: url(images/body_bot_1.gif) bottom no-repeat;
padding: 1px 0;
}
#body2 {
background: url(images/body_bg_2.gif) repeat-y;
width: 832px;
}
#bodyi2 {
background: url(images/body_top_2.gif) no-repeat;
width: 832px;
}
#bodyj2 {
background: url(images/body_bot_2.gif) bottom no-repeat;
padding: 1px 0;
}
h1, h2, h3, #nav, #nav li {
margin: 0; padding: 0;
}
#nav {
font-size: 10px;
position: absolute;
right: 0;
top: 12px;
line-height: 1.2;
padding-left: 120px;
}
#nav li {
float: left;
width: 108px;
list-style: none;
margin-left: 2px;
border-bottom: 1px solid black;
}
#nav a {
background: #738d09;
color: #2e3901;
font-weight: bold;
text-decoration: none;
display: block;
text-align: center;
padding: 1px 0;
}
#sidebar {
float: left;
width: 250px;
padding-left: 4px;
}
#sidebar .content {
padding-left: 24px;
}
#sidebar .content img {
float: left;
clear: left;
margin: 5px 5px 5px 0;
}
#sidebar .divider {
background: url(images/left_splitter.gif) center no-repeat;
height: 5px;
width: 169px;
}
#content {
float: right;
width: 462px;
}
#content1 {
float: left;
width: 800px;
}
#content1 .content {
margin: 7px 35px 7px 20px;
padding-left: 20px;
}
#content .content {
margin: 7px 55px 7px 17px;
}
#content .content table {
width: 310px;
margin-right: 0px;
}
#content .content table td,
#content .content table th {
padding-right: 10px;
}
#content .content table td.download {
text-align: right;
padding-right: 0px;
}
#content .divider {
background: url(images/right_splitter.gif) repeat-x;
height: 5px;
}
h1 {
position: absolute;
left: 0;
top: 0;
}
h2 {
font-size: 10px;
color: #cf9118;
margin: 1em 0;
}
h3 {
font-size: 10px;
margin: 1em 0;
}
h5 {
font-size: 20px;
color: #cf9118;
margin: 1em 0;
text-align: center;
}
h6 {
font-size: 18px;
margin: 1em 0;
}
p {
margin: 1em 0;
}
img {
border: 0;
}
img.left { float: left; margin-right: 14px; }
img.right { float: right; margin-left: 14px; }
.readmore {
text-align: right;
}
.hidden {
visibility: hidden;
}
.clear {
clear: both;
}
a {
color: #f0b33c;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #cf9118;
}
a:hover {
text-decoration: underline;
}
table a {
text-decoration: underline;
font-weight: normal;
color: #7f7c79;
}
#power {color:#fff;text-align:center;}
#power a {color:#fff;}
de Cualquier ayuda apreciada ... Gracias de antemano.
Podría por favor ser más específico ? No entendí bien tu problema. –
Aquí hay un violín de su código: http://jsfiddle.net/nbVg4/show/ Aunque estoy de acuerdo, ¿qué quiere decir exactamente con "transparente"? – justis
es difícil de ver en el ejemplo, pero si establece el valor de opacidad en 20% se vuelve más obvio. –