代码之家 › 专栏 › 技术社区 › Ina

如何使用图像:固定、z索引和滚动效果

background-position z-index css-position css html

Ina · 技术社区 · 10 年前

我想知道是否有人能告诉我如何使用类似的图像效果等。给那些 http://www.handsoneveryday.com/ 背景图像信息。页面中央的框和滚动到整个页面的灰色。
我尝试过使用z索引和位置:固定,但似乎没有任何效果。
非常感谢你
-Ina公司

3 回复 | 直到 10 年前

Kalpesh Singh 10 年前

这很简单,您可以通过将以下属性应用于类来实现,例如 .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>

masmrdrr 10 年前

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

这相当简单,可以找到编码帮助 here .

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

希望这有帮助。

STEAMworks Learning Center 10 年前

这是一个快速而肮脏的视差示例。

然后在z轴上进行缩放的3d变换。z轴进入屏幕。缩放是为了防止离你更远的层(离屏幕更远)变得更小。因为它是一个三维变换透视图,所以这是一个问题。

希望这有帮助。

最好的

提姆

.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>