我创建了一个 js fiddle http://jsfiddle.net/claireC/8SUmn/具有透明的固定 header 。
当我滚动时,您可以看到文本在它后面向上滚动。如何让文本消失或隐藏在滚动的透明 div 后面。
编辑:忘了说背景是一张图片。
注意:我是编码初学者。这是我在玩弄代码并试图解决问题。
这是我的 html:
<div class="container">
<header>
<ul>
<li>list one</li>
<li>list3 </li>
<li>list2</li>
</ul>
</header>
<div class="text">
<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>
CSS:
header{
width: 100%;
position: fixed;
top: 0;
border: 1px solid #000;
}
.text{
border: 1px solid #fff;
position: relative;
margin-top: 150px;
}
p{
font-size: 150px;
}
最佳答案
如果您可以设置页眉高度,则可以使用position:absolute
和overflow:auto
来获取结果
Demo
关于html - 滚动时如何让内容消失/隐藏在透明标题后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23746556/