Question

我环顾四周，但是我甚至不知道效果的名称并没有帮助。

有什么效果的透明div部分后面有一个大图像。它与paralax效果类似，但我不认为它属于该类别。

在＃34;所有你喜欢的游戏中去。＆＃34;部分。

我在很多网站上看过它。

如果我至少可以知道效果的名称，我可以继续学习它。

编辑：谢谢大家，我认为这是一种奇特的效果。它非常简单，我自己也只是在玩：http://jsfiddle.net/uuepunx8/

html, body{
    height: 100%;
    width: 100%;
}

*{
    padding: 0;
    margin: 0;
}

.first{
    width: 100%;
    height: calc(100% + 100px);
    background-color: red;
}

.second{
    height: 50%;
    background: url('http://hdwallpaper.freehdw.com/0004/3d-abstract_hdwallpaper_equations_33432.jpg') fixed 0 0;
}

Answer 1

我不知道这个名字，但使用CSS并不难实现这个效果。

您所要做的就是为每个滚动div（或构建页面的其他元素类型）添加背景图像，将背景附件设置为＆＃34; fixed＆＃34;。

Answer 2

将主容器的背景设置为position：fixed;是你正在寻找的。您的内部内容需要足够大才能滚动内容并打破内容，例如保证金底部：300px：

.background{
    background: url(http://lorempixel.com/300/300/) repeat;
    background-size: cover;
    position: fixed;
    height: 100%;
    width: 100%;
}

Here is a simple JSFiddle to play with.

透明div与效果背后的大图像

2 个答案: