我想知道是否有人可以告诉我如何使用类似的图像效果等。可以访问http://www.handsoneveryday.com/上的背景图片，位于页面中心的info.box和滚动到其上方的灰色。
我尝试使用z-index和position：fixed，但似乎没有任何效果。
非常感谢
-Ina
这很容易，您可以通过将以下属性应用到您的类（例如）来实现.parrallax。
.parallax {
background-image: url("PATH_OF_IMAGE");
background-attachment: fixed;
background-size: 100% 40%;
height: 300px;
}
这是工作演示-
.parallax {
background-image: url(https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375);
background-attachment: fixed;
background-size: 100% 40%;
height: 300px;
}
.diffImg {
background-image: url('https://images.unsplash.com/photo-1449452198679-05c7fd30f416?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');
}<div class="parallax"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div class="parallax diffImg"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句