html - 在带有背景图像的 div 上滚动透明 div

标签 html css

我得到了一个 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/

相关文章:

javascript - FancyBox 不会播放 youtube 视频

javascript - 如何为同时更改文本的多个元素创建 javascript 显示/隐藏切换?

javascript - 响应式下拉汉堡菜单

css - all 选择器是 Hack 还是标准?

javascript - CSS从IFrame弹出窗口

php - CSS 未加载到子目录中

jquery - 元素背景,颜色和图像,这可能吗?

Firefox 中的 <SELECT> 不再支持 CSS 字体系列?

javascript - 宽度为 100% 的简单 slider

php - 如何使用 php 或 javascript 将特定的 css id 添加到父菜单