我已经快速制作了一个简单的网站试试这个，但现在文本确实在菜单栏下完美，但我希望我的标题（菜单栏和标题）是透明的，但是当我让它透明时你会看到文本在它下面。有没有办法解决这个问题，以便背景透明：rgba(0,0,0,0.5)，文字会在标题下消失？'
这是我的HTML代码：和jsfiddle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
</head>
<body>
<header>
<div id="title">
<h1 class="headertext">My Test Website</h1>
</div>
<div id="menubar">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</div>
</header>
<div id="leftmenu">
<ul>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</div>
<div id="container">
<div id="content">
HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT HELLO THIS IS SOME TEXT JUST TO TEST SOME THINGS OUT
</div><!--content div-->
</div>
</body>
</html>
这是我的CSS代码：
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,.8);
}
.headertext{
margin-top: 15px;
text-align: center;
}
#title{
font-size: 20px;
margin: 50px 0 30px 0;
width: 100%;
height: 80px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
margin-top: 10px;
float: left;
clear: both;
width: 100%;
height: 50px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin: 0;
padding-top: 15px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#container{
width: 1200px;
height: 1200px;
}
#leftmenu{
position: fixed;
margin-top: 223px;
margin-left: 50px;
padding-top: 20px;
float: left;
width: 160px;
height: 100%;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
border-bottom: 2px solid #010000;
}
#leftmenu ul li{
display: block;
padding-bottom: 20px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#content{
text-align: left;
margin-left: 100px;
width: 1000px;
padding-top: 250px;
padding-left: 160px;
color: #000000;
}
提前致谢！
答案 0 :(得分：0)
很抱歉打破这一点，但我认为，你想要实现的目标是不可能的，因为，简单地说，它没有透明度的概念....
transparent background 的整个想法是展示基础 div ot text or pictures etc。如果你想保留一个transparent <header>但想隐藏在它下滚动的东西，那么为什么要保持它透明，为什么不保持它不透明....
尽管如此，如果你想同时显示文字并保持透明标题（纯css方式），我建议像scrollable div那样做：
#content > p {
color: rgba(0, 0, 0, 1);
height:200px;
overflow-y:scroll;
}