Question

我已经快速制作了一个简单的网站来试试这个，但现在文本确实在菜单栏下完美，但是我希望我的标题（菜单栏和标题）是透明的但是当我让它透明时你会看到文本在它下面。有没有办法解决这个问题，以便背景是透明的：rgba（0,0,0,0.5）并且文本在标题下消失了？'

这是我的HTML代码：

    <!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>

这是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,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;
    background: #white;
    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;
}

感谢您提前帮助！

Answer 1

当你定位固定的东西时，你也应该给它一个位置。像

这样的东西

left:100px;
top:150px;

Answer 2

你的CSS

#topbar {
   width: 100%;
   height: 45px;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: 150;
   background: url('./images/bg.png') repeat scroll;
   color: white;
}

#stickybartop {
   width: 100%;
   height: 45px;
   position: fixed;
   top: 45px;
   left: 0px;
   z-index:150;       
   background: #fff;
   color: white;
   }

您的HTML代码：

   <html>
   <div id='topbar'>
   <a href='http://yourwebsitename.com'><img src='./images/logo.png' style='width:145px; margin-left:14%;'></a>
   </div>   

   <div id='stickybartop'>
   <ul class="nav nav-tabs" id="nav2">
               <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>
   </html>

Answer 3

您缺少标题的背景颜色。

header{
    position: fixed;
    background-color:white;
}

应该为你解决这个问题

这是一个已经解决的问题 http://jsfiddle.net/7kJUX/

Answer 4

尝试这样做。这样可以让您更接近在标题下滑动内容的效果。

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: blue;
    box-shadow: 0 0 4px grey;
}

Answer 5

为标题元素提供背景颜色全部完成

你犯了一个错误#white＃与hexa值一起使用，即#ffffff或#fff用于白色

Answer 6

另一个“诡计”：不要移动内容，将其用作可滚动容器。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Bla</title>
        <!-- move the style to the css file! -->
        <style type='text/css'>
            div.header { position:absolute;  top:0px; left:0px; height: 50px; width:100%; overflow:hidden; }
            div.container { position:absolute; overflow:auto; top:50px; bottom:0px }
        </style>
    </head>
    <body>
        <div class='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>
        </div>
        <div id="container" class='container'>
            <div id="content">
                     Here has to come some 'content', text for example that scroll's under the menubar and header.
                     <script type='text/javascript'>
                         //I'm too lazy to set here a lot of text, so let add it using script
                         for (var i=0; i<1000; i++) {
                             document.write ("bla ");
                         }
                     </script>
            </div>
        </div>
    </body>
</html>

如何让我的网站内容在我的固定菜单栏下滚动并在透明背景下消失？

6 个答案: