如何使用CSS在静止背景图像上创建滚动窗口？

对于你们中的一些CSS专家来说，这个问题应该很容易。至少我希望是。所有我想知道的是什么CSS看起来像这样实现这一效果：如何使用CSS在静止背景图像上创建滚动窗口？

http://www.nodeconf.com/

如果滚动该页面，你可以看到他们是如何创造了这个“缝隙”，你可以滚动在不同同行背景图像的部分。每个缝隙似乎都有不同的图像。我认为这很酷，但不知道如何实现类似的东西。这种效果是否需要使用JavaScript？如果是这样，它有多复杂？

来源

2013-11-21 Chev

您正在寻找**视差滚动**。 –

真棒谢谢你。将立即执行Google-fu。 – Chev

从查看源我觉得它更是这样的：

http://jsfiddle.net/WZm9Z/

HTML：

<div class="image-block" style="background:url(http://placekitten.com/1543/1024) no-repeat center center fixed;"></div>

CSS：

.image-block { 
    width: 100%; 
    height: 80px; 
}

来源

2013-11-22 00:32:33 user3019837

不错，干得好！ – pjam

@ user3019837你是谁，很好的答案。欢迎来到社区。一群试图帮助的人。顺便说一句，有一个社交饲料。 – agconti

宾果！非常聪明。谢谢。 – Chev

如果您在页面上单击鼠标右键，选择“检查元素”，你会发现，这些背景图片的CSS是：

background: url(images/aBR9P1476.jpg) no-repeat center center fixed;

这基本上是简写：

background-image:url(images/aBR9P1476.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment: fixed;

你特别感兴趣的是最后一个属性“background-attachment”。

查看文档这里此属性： http://www.w3schools.com/cssref/pr_background-attachment.asp

背景附件属性设置一个背景图像是否固定或滚动与页面的其余部分。

干杯

来源

2013-11-22 00:08:22 JackKalish

哈哈我很感激，但我并没有被固定的背景弄糊涂。而是前景在固定背景上创建一种透明度蒙版。对不起，如果我的问题很混乱，我不知道我在问什么，直到有人在评论中说“视差滚动”。 – Chev

尝试是这样的：

http://jsfiddle.net/kx3cP/

HTML：

<div class="background"><img src="http://placekitten.com/1800/950" alt=""></div> 
<div class="content"></div> 
<div class="content"></div>

CSS：

.background { z-index: -9999; position:fixed; } 
.content {background: black; width 50%; height:50em; margin:2em;}

来源

2013-11-22 00:12:22 agconti

如何使用CSS在静止背景图像上创建滚动窗口？

回答

相关问题