Question

我使用可滚动背景的网站透明标题。但我想让内容消失在标题下方。请在此处找到我的代码http://jsfiddle.net/prta/yw0w4d3p/1/。任何帮助表示赞赏。

CSS

body {
    color:white;
}
header {
    position:fixed;
}
li {
    float:left;
    list-style:none;
    margin:0 20px 0 20px;
}
a {
    text-decoration:none;
    color:red;
    font-size:50px;
}
.bg {
    width:100%;
    height:100% auto;
    background: url(http://southerngaragebands.com/Aero_Woods.jpg); 
    margin-top: -20px;

}
p {
    margin:20px 20px 20px 20px;
    font-size:30px;
    padding-top:100px;
}

谢谢

Answer 1

设置标题的背景颜色。您可以根据需要设置宽度，如果需要，可以降低不透明度（不透明度：0.8）。

header {
    position: fixed;
    width: 100%;
    background-color: white;
    opacity: 1;
}

Answer 2

我不认为这完全符合您的要求，但这是我发现您可以将文字放入div并给它position:fixed然后给它{{}}的选项之一。 1}}这样你可以保持标题的位置，但如果页面滚动http://jsfiddle.net/yw0w4d3p/9/

，这不起作用

overflow:scroll;

Answer 3

看看这个例子，它可能会帮到你！您可以使用position:absolute和overflow:auto来获得结果。

Demo

Answer 4

好吧，如果你可以使用固定的背景，这不是什么大问题，但如果你想让它成为可滚动的背景，那么我不认为你可以在没有某种javascript的情况下使它工作因为所有答案都使用fixed background-attachment，所以这是我的镜头。标头不是transparent，而是使用与.bg块相同的背景

http://jsfiddle.net/yw0w4d3p/18/

＆＃13;

body {
    color:white;
        margin: 0 auto;
}
header {
    position:fixed;
       background: url("http://southerngaragebands.com/Aero_Woods.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
       width: 100%;
}
li {
    float:left;
    list-style:none;
    margin:0 20px 0 20px;
}
a {
    text-decoration:none;
    color:red;
    font-size:50px;
}
.bg {
     background: url("http://southerngaragebands.com/Aero_Woods.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
     margin-top: -20px;
     width: 100%;
   
}
p {
    margin:20px 20px 20px 20px;
    font-size:30px;
    padding-top:100px;
}

＆＃13;

<header>
    <ul>
        <li><a href="#one">one</a>
        </li>
        <li><a href="#two">two</a>
        </li>
        <li><a href="#three">three</a>
        </li>
    </ul>
</header>
<div id="one" class="bg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.</p>
</div>
<div id="two" class="bg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.</p>
</div>
<div id="three" class="bg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.</p>
</div>

＆＃13;

文本在透明标题html css中滚动

4 个答案: