这些背景图像如何保持这样固定？

Question

我不太确定该怎么称呼这个问题，所以希望标题是正确的。

我打算在这个网站上为一个新客户工作，他们说他们想要一些类似于这个网站正在做的事情（http://www.buzzardfilm.com）。

如果向下滚动它，您会在索引页上看到它有这种“流畅的动画”，并且新块开始向上滑动到背景图像中？

这就是我说的： http://gyazo.com/8cafbab233930bd478723b48c5912263

我的问题是，这是怎么实现的一般？这只是一个顶部有一些文字的图像，或者这可能是一个背景图像？我需要什么样的规则来实现这个目标？

Answer 1

你可以用CSS做看到这个例子你谈论

body{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.one{ 
 
    background-image:url('https://placekitten.com/g/1200/800'); 
 
    height:500px; 
 
    background-size:cover; 
 
    background-position:static; 
 
    position: static; 
 
    background-position: inherit; 
 
    background-attachment: fixed; 
 
    } 
 
    
 
.two{ 
 
    height:500px; 
 
    }

<div class="one"></div> 
 
<div class="two"> 
 
    <p> 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula sem mi, at faucibus ex consequat eu. Suspendisse bibendum nulla id nisl pulvinar, a lacinia nisi imperdiet. Nam eget mi congue, lacinia augue dictum, ullamcorper ex. Donec condimentum dolor nisl, eu tincidunt lacus congue et. Duis eu libero id nunc facilisis viverra a id velit. Suspendisse potenti. Fusce in nisi eu est consectetur fringilla vitae non nunc. Cras neque elit, pharetra at ipsum at, semper laoreet eros. Nunc eu dolor blandit, varius felis vel, congue turpis. Vestibulum ullamcorper leo odio, in mattis ante pretium nec. Ut sagittis luctus lacinia. Donec vehicula ullamcorper lectus, eget pretium nisi laoreet id. Cras id laoreet nunc, ac molestie lectus. Phasellus suscipit, risus eget fringilla posuere, urna eros venenatis ante, vel finibus lorem arcu a massa. Etiam at ante massa. 
 
</p> 
 
    <p> 
 
Ut tempor fermentum dui sed placerat. In commodo velit at augue luctus bibendum. Aliquam ullamcorper tincidunt posuere. Sed congue sagittis est ac viverra. Cras eget lobortis leo. Donec rutrum elit purus, et sollicitudin lacus pulvinar eu. Maecenas sit amet metus nisi. Proin porta diam et rhoncus mollis. Quisque arcu leo, sagittis a iaculis gravida, pulvinar ac risus. Etiam lacinia urna nunc, eu tincidunt massa finibus id. Aliquam posuere, est at mollis rhoncus, libero neque varius dui, vel facilisis odio dolor non ante. Nullam tempor ligula non pellentesque aliquet. Donec rutrum est ac nisi tempus dapibus. Sed vel est eget nisi bibendum dapibus. In consectetur leo volutpat, pharetra dui in, consequat magna. 
 
    </p> 
 
<p> 
 
Ut luctus vel dolor vel laoreet. Nullam sit amet eleifend dui. Suspendisse potenti. Fusce eleifend, erat sit amet rutrum convallis, diam purus accumsan neque, vel dignissim ante erat ut neque. Cras sed nunc vitae libero fermentum porta. Pellentesque sodales odio et mi pharetra, non hendrerit eros auctor. Morbi quis erat et enim tempus tempus eget mattis nibh. 
 
<p> 
 
Morbi sed risus egestas, facilisis lectus sit amet, ullamcorper lectus. Duis pellentesque dictum lobortis. Morbi ullamcorper et ipsum id vehicula. In consequat mi eu faucibus hendrerit. Cras finibus dapibus elit, vel venenatis mauris convallis eleifend. Aliquam pellentesque ante in sapien bibendum suscipit. Praesent et felis eu tellus mollis ullamcorper non vitae quam. 
 
    </p> 
 
<p> 
 
Quisque dui felis, placerat quis blandit in, rutrum vel neque. Maecenas molestie semper rhoncus. Sed vel aliquam odio. Aenean vulputate nisi id vehicula ultrices. Nam tellus sem, faucibus sed libero ut, vehicula auctor eros. Nulla aliquam mauris sit amet lacinia vehicula. Quisque ac sem sed ante accumsan auctor. Suspendisse vitae dolor felis. Nullam in libero vel velit mollis molestie venenatis et libero. Cras vulputate, ante et tempus interdum, dui augue dapibus felis, sit amet porta tortor libero ut purus. Cras augue dolor, efficitur commodo tristique ut, gravida id augue. Praesent interdum nisl eu ultrices euismod. Aenean vulputate accumsan sem, eget eleifend elit eleifend auctor. Mauris egestas rhoncus quam, egestas accumsan neque ullamcorper a. 
 
    </p> 
 
<p> 
 
Praesent pharetra risus felis, non mollis lectus lobortis non. Praesent porttitor ultrices auctor. Suspendisse maximus est a sem mollis, ut vestibulum lacus scelerisque. Phasellus pretium non tortor quis malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin metus sapien, molestie at sollicitudin vitae, pulvinar at quam. Aliquam ultricies nisl ligula, sit amet finibus metus finibus sed. Etiam porta ultricies arcu tempus dignissim. Cras lobortis, ante non tristique vulputate, augue dui convallis tellus, eu feugiat justo nisi eget elit. Integer iaculis egestas lectus, vitae venenatis est imperdiet in. 
 
<p> 
 
Praesent mollis tempus imperdiet. Nunc iaculis enim lacus, sit amet eleifend velit porta vel. Etiam condimentum gravida dui vulputate dignissim. Nam ut dui vitae massa scelerisque pellentesque. Mauris vitae venenatis enim. Sed sagittis mi eget lacus congue, a bibendum nibh elementum. Aenean posuere pharetra purus, sit amet aliquet dui tempor nec. Fusce ut orci pulvinar, sollicitudin sapien eu, cursus augue. 
 
    </p> 
 
<p> 
 
Sed lacinia rutrum sem et convallis. Integer vel pretium mauris, eget porttitor nibh. Duis sed tellus massa. Fusce massa felis, laoreet vitae velit id, efficitur ornare nunc. Nam nec lectus non risus luctus vehicula et nec erat. Pellentesque tempor tincidunt odio pretium sagittis. Nullam id vestibulum nisl. Sed a odio leo. Proin in mi nisl. Aliquam ut bibendum arcu. Aliquam porta molestie nisl quis fringilla. In iaculis, ex in consectetur commodo, ante nulla rutrum orci, ac varius nibh nisi at ante. 
 
    </p> 
 
<p> 
 
Nullam ultricies sit amet massa nec placerat. Sed id sapien mi. Fusce maximus et libero quis fermentum. Nulla mattis ornare orci quis tempus. Integer id enim in ligula tincidunt lacinia. Nullam elit nulla, facilisis ultricies purus vitae, interdum malesuada massa. Nam tincidunt lacus erat. Fusce sagittis porttitor libero. Proin mi nibh, posuere sit amet dolor non, porttitor vulputate sapien. Sed faucibus a mi in molestie. Curabitur a bibendum neque. 
 
    </p> 
 
<p> 
 
Donec pretium mollis dui. Morbi quis tincidunt enim. Nunc venenatis leo a nunc lacinia, ac sodales odio lacinia. Fusce eget cursus massa. Curabitur ac luctus nulla, eu dignissim augue. Ut scelerisque ligula ut nulla tempus consectetur. Mauris eget odio velit. Donec faucibus imperdiet volutpat. Praesent ante odio, congue a quam ut, facilisis fringilla velit. Donec eget est risus. Integer lobortis neque sit amet massa vulputate, ac ultricies velit dignissim. Vivamus lectus turpis, varius at augue in, facilisis finibus justo. Pellentesque laoreet libero sed sapien maximus, sed feugiat leo gravida. Pellentesque at velit a purus condimentum hendrerit faucibus non leo. 
 
    </p> 
 
</div>

Answer 2

要保持一个背景图像的地方，你将要使用的“背景附件”属性，像这样：

selector { 
    background-image: url(image.extension); 
    background-attachment: fixed; 
} 

可以放置在背景图像上的任何内容，并为您滚动时，背景将在内容移动时保持固定。