如何使我的网站背景透明而不使内容(图像和文本)也透明? [英] How can I make my website's background transparent without making the content (images & text) transparent too?
本文介绍了如何使我的网站背景透明而不使内容(图像和文本)也透明?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为一个学校项目做一个网站，我目前有一个小问题......我不能让身体的背景透明而不影响其中的内容.
I'm doing a website for a school project, and I'm currently having a small problem... I can't make the body's background transparent without it also affecting the content in it.
这是我的 HTML 代码:
Here's my HTML code:
<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>
这是 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;}
任何帮助表示赞赏...在此先感谢.
Any help's appreciated... Thanks in advance.
推荐答案
我认为最简单的解决方案是添加一个额外的 div<，而不是让 body 元素部分透明/code> 来保持背景，并改变那里的不透明度.
I think the simplest solution, rather than making the body element partially transparent, would be to add an extra div to hold the background, and change the opacity there, instead.
所以你会添加一个 div 像:
So you would add a div like:
<div id="background"></div>
然后将你的 body 元素的背景 CSS 以及一些额外的定位属性移动到它上面，像这样:
And move your body element's background CSS to it, as well as some additional positioning properties, like this:
#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('images/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
opacity: 0.8;
filter:alpha(opacity=80);
}
这是一个例子:http://jsfiddle.net/nbVg4/4/
这篇关于如何使我的网站背景透明而不使内容(图像和文本)也透明?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
