如何使用 image:fixed、z-index 和滚动效果

Question

我想知道是否有人能够告诉我如何使用类似的图像效果等。 http://www.handsoneveryday.com/ 上的背景图片，info.box 页面中央的那些以及滚动所有页面的灰色。
我试过使用 z-index 和 position:fixed 但似乎没有任何效果。
非常感谢
-伊娜

Answer 1

这是使用 CSS 和 HTML 的视差效果实现的。

相当简单，可以找到编码帮助 here。

要构建的代码示例可以是seen here。

希望这对您有所帮助。

Answer 2

这很容易，您可以通过将以下属性应用到 class 来实现这一点，比如 .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>

Answer 3

这是一个简单粗暴的视差示例。

CSS: div 定位然后在 z 轴上缩放 3d 变换。 z 轴进入屏幕。缩放是为了防止离你更远的层（进一步进入屏幕）变小。由于它是 3d 变换透视是一个问题。

希望对您有所帮助。

最佳，

蒂姆

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer-lower {
  top: 100px;
}
.parallax__layer-deep {
  transform: translateZ(-2px) scale(3);
}
.parallax__layer-back {
  transform: translateZ(-1px) scale(2);
}

<div class="parallax">
  <div class="parallax__layer parallax__layer-lower parallax__layer-back">
    Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla.
  </div>
  <div class="parallax__layer parallax__layer-deep">
    Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur.
  </div>
</div>

如何使用 image:fixed、z-index 和滚动效果

How to use image:fixed, z-index and scroll-over effects

html

css

z-index

css-position

background-position