如何让我的网站内容在我的固定菜单栏下滚动并在透明背景下消失？
Posted
技术标签:
【中文标题】如何让我的网站内容在我的固定菜单栏下滚动并在透明背景下消失？【英文标题】：How do I get my website content to scroll under my fixed menu bar and disappear under a transparant background? 【发布时间】：2013-12-26 11:20:52 【问题描述】：我已经快速创建了一个简单的网站来尝试这个，但现在文本确实在完美的菜单栏下，但我希望我的标题（菜单栏和标题）是透明的，但是当我让它透明时你会看到文字放在它下面。有没有办法解决这个问题，使背景透明：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;
提前致谢！
【问题讨论】：
这些可能会有所帮助：1) ***.com/questions/11774250/… 2) ***.com/questions/14137378/… 不，这对我不起作用，有人可以用我的代码清楚地解释一下吗（我是初学者）谢谢！ Cmon 人帮助我，我正在等待答案 耐心是一种美德... 50 分钟前问... 那只是等待 @user3123507：你的小提琴中没有<header>，假设它在最上面，在#title上方......
【参考方案1】：
很抱歉告诉你这个问题，但我认为，你试图实现的目标是不可能的，因为简单地说，它不符合透明度的概念......
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;
see demo here
【讨论】：
以上是关于如何让我的网站内容在我的固定菜单栏下滚动并在透明背景下消失？的主要内容，如果未能解决你的问题，请参考以下文章