我得到了一个 100% 高度和宽度的 div,它有一个覆盖且固定的背景图像。在这个 div 之后,还有另一个 div,它应该包含一些具有透明背景的文本。所以当我向下滚动时,第二个 div 滚动到第一个 div(看起来像)但文本应该在透明的 div 上。
fiddle :
http://jsfiddle.net/do3mw9ju/2/
如何实现?
最佳答案
通常您会希望在 <body>
上显示您的背景图片元素,因此它实际上位于所有内容的后面而不是滚动。
但是,如果你想保持原样,你可以为此使用伪元素。
http://jsfiddle.net/do3mw9ju/3/
#uberuns {
height:100%;
width:100%;
background:rgba(255, 255, 255, .9);
position:relative;
}
#uberuns:after {
content:'';
height:100%;
width:100%;
background: url("http://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png");
position:absolute;
background-attachment:fixed;
background-size:cover;
left:0;
top:0;
z-index:-1;
}
关于html - 在带有背景图像的 div 上滚动透明 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28563479/