15
Sto facendo un sito Web per un progetto scolastico e attualmente sto riscontrando un piccolo problema ... Non riesco a rendere trasparente lo sfondo del corpo senza che questo influenzi anche il contenuto.Come posso rendere trasparente lo sfondo del mio sito Web senza rendere trasparenti anche i contenuti (immagini e testo)?
Ecco il mio codice 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>
Ed ecco il codice 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;}
qualsiasi aiuto apprezzato ... Grazie in anticipo.
La prego di essere più specifico ? Non ho capito bene il tuo problema. –
Ecco un po 'del suo codice: http://jsfiddle.net/nbVg4/show/ Anche se sono d'accordo, cosa intendi esattamente con "trasparente?" – justis
è difficile vedere dall'esempio, ma se si imposta il valore di opacità al 20% diventa più ovvio. –