Question

我正在尝试制作像https://www.artyofficial.com/这样的功能。

向下滚动时，第一张图像开始被剪切时，将出现第二张图像的底部。如何用CSS实现这样的事情？我会张贴样式表，但不幸的是我甚至不知道从哪里开始。

Answer 1

我首先看一下background-attachment属性，它的值为：

fixed The background is fixed with regard to the viewport

Answer 2

它被称为视差效应。您可以参考链接：link

<style>
.parallax { 
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<!-- Container element -->
<div class="parallax"></div>

Answer 3

你只需要提供所有这样的连续div background-attachment: fixed。请查看以下示例：

.panels{
  width: 100vw;
  height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.panels:nth-child(1){background-image: url('http://lorempixel.com/400/200/sports/');}

.panels:nth-child(2){background-image: url('http://lorempixel.com/400/200/nightlife/');}

.panels:nth-child(3){background-image: url('http://lorempixel.com/400/200/cats/');}

.panels:nth-child(4){background-image: url('http://lorempixel.com/400/200/food/');}

.panels:nth-child(5){background-image: url('http://lorempixel.com/400/200/nature/');}


/* this is for hiding stackoverflow console */
.as-console-wrapper{ display: none !important; }

<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>
<div class="panels"></div>

Answer 4

您要找的是parallax scrolling effect

最重要的属性是background-attachment: fixed;。

我尽量让你JSFiddle轻松一点，看看它。

滚动时制作背景图像首先显示底部？

4 个答案: