Question

我有一个100％的高度和宽度div，它有一个覆盖和固定的背景图像。在这个div之后，还有另一个div应该包含一些带有透明背景的文本。因此，当我向下滚动时，第二个div滚过第一个div（看起来像）但是文本应该在透明div上。

Fiddle: http://jsfiddle.net/do3mw9ju/2/

如何实现这一目标？

Answer 1

通常，您希望在<body>元素上使用背景图片，以便它实际上落后于所有内容，而不是滚动。

但是，如果你想保持它们的状态，可以使用伪元素。

#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;
}

Answer 2

<div class="section" id="home"><br><br><br><br></div>是不是很糟糕。使用margin / padding来创建这个空格，而不是<br>。

对于白色div，只需使用RGBA

http://jsfiddle.net/12p1g2zo/

滚动透明div在div与背景图像

2 个答案: