如何使我的网站背景透明而不使内容（图像和文本）也透明？
Posted
技术标签:
【中文标题】如何使我的网站背景透明而不使内容（图像和文本）也透明？【英文标题】：How can I make my website's background transparent without making the content (images & text) transparent too? 【发布时间】：2012-01-23 20:34:10 【问题描述】：我正在为一个学校项目做一个网站，我目前有一个小问题......我不能让身体的背景透明而不影响其中的内容。
这是我的 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" /></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" />
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" />
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" /></center>
<div class="content">
<h2>O album mais recente</h2>
<img src="images/nightmare.jpg" 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 >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;
任何帮助表示赞赏...在此先感谢。
【问题讨论】：
您能说得更具体些吗？我不太明白你的问题。 这是他的代码：jsfiddle.net/nbVg4/show 虽然我同意，但你所说的“透明”到底是什么意思？ 从示例中很难看出，但是如果将不透明度值设置为 20%，它会变得更加明显。 啊，您正试图通过为body 设置较低的不透明度来使背景图像变暗？
基本上，我想要有 2 个背景，一个页面背景的图像（图像本身完全可见），然后有一个稍微暗淡的背景作为正文的所有内容，文本和图像。我这样做的方式是，通过在 CSS 中添加 opacity 变量，为包括图像在内的整个主体设置不透明度。
【参考方案1】：
background:rgba(0,0,0,0);
opacity:1;
【讨论】：
请解释你的答案。它目前被视为低质量的帖子。谢谢！【参考方案2】：只需在您的代码中包含以下内容
<body background="C:\Users\Desktop\images.jpg">
如果要指定大小和不透明度，可以使用以下
<p><img style="opacity:0.9;" src="C:\Users\Desktop\images.jpg" /></p>
【讨论】：
【参考方案3】：我同意@evillinux，
最好让你的背景图片半透明，这样它就支持 使用另一个 div 的其他建议也是一个不错的选择，如果您想在 css 中执行此操作，这是一个不错的选择。例如，如果该站点具有选择您自己的背景颜色等功能。我建议对较旧的 IE 使用过滤器。例如：filter:Alpha(opacity=50)
【讨论】：
【参考方案4】：使背景图像透明/半透明。如果它是纯色背景，只需在烟花或其他任何东西中创建 1px x 1px 图像并调整其不透明度...
【讨论】：
【参考方案5】：我认为最简单的解决方案不是让body 元素部分透明，而是添加一个额外的div 来保持背景，并改变那里的不透明度。
所以你会添加一个div 喜欢：
<div id="background"></div>
并将body 元素的背景 CSS 以及一些额外的定位属性移动到它上面，如下所示：
#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/
【讨论】：
【参考方案6】：您可能需要一个额外的包装器。 使用 div 作为背景并将其放置在您的内容下方..
http://jsfiddle.net/pixelass/42F2j/
HTML
<div id="background-image"></div>
<div id="content">
Here is the content at opacity 1
<img src="http://lorempixel.com/100/50/fashion/1/">
</div>
CSS
#background-image
background-image: url(http://lorempixel.com/400/200/sports/1/);
opacity:0.4;
position:absolute;
top:0;
left:0;
height:200px;
width:400px;
z-index:0;
#content
z-index:1;
position:relative;
【讨论】：
【参考方案7】：如果可以接受，有一个css3 solution here。它支持不支持 css3 的 graceful degradation 方法。你只是没有任何透明度。
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%;
background: rgb(0, 0, 0); /* for older browsers */
background: rgba(0, 0, 0, 0.8); /* R, G, B, A */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC000000, endColorstr=#CC0000); /* AA, RR, GG, BB */
要获得相当于 80% (CC) 的十六进制，取 (pct / 100) * 255 并转换为十六进制。
【讨论】：
【参考方案8】：我认为发生了什么，因为包装器ID是相对位置，它只是出现在与body标签相同的位置，你应该做的是，你可以在包装器ID中添加一个Z-index。
#wrapper
margin: auto;
text-align: left;
width: 832px;
position: relative;
padding-top: 27px;
z-index: 99; /* added this line */
这应该在透明主体标签上方创建图层。
【讨论】：
以上是关于如何使我的网站背景透明而不使内容（图像和文本）也透明？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI 对话框 - 仅使用背景不透明度而不使字体变灰？
如何让我的网站内容在我的固定菜单栏下滚动并在透明背景下消失？