Question

在这个视差中覆盖图标狗是否有效？我希望在整个部分看到图标狗整个身体，我尽我所能，但我会浪费我的时间。看到底部的代码。如果我错了，你能纠正我的代码吗？最好的问候谢谢。

＆＃13;

html, body {
  height: 100%;
}
body {
  background: #f6f6f6;
  margin: 0 0 0;
  padding: 0;
}
#content {
  position: relative;
}
.Parallax {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 90%;
  padding: 5%;
  height: 600px;
}
.Parallax:before {
  content: ' ';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: red;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;

}
.Parallax h1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: #fff;
  width: 50%;
  height: 1em;
  text-align: center;
  z-index: 2;
}
p{
  color: #fff;
}
.Parallax-image-1:before {
  background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTqgknPHfXngK5Rm8foHqsR-K5J5yAKa-njp2XC5cGCjtmRo__KEw);
}

.Parallax-image-2:before {
  background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSwu_ZX03m-x1IOFgD38wHyuHkXbwSizX7PmHpW5phV3pQpoNqIpQ);
}
.imgoverflow{
height: 200px;
margin-top: -30vmin; 
}

＆＃13;

<div id="content">
    <section class="Parallax Parallax-image-1">
      <h1>Title Text</h1>
    </section>

    <section class="Parallax">
    <img src="http://www.clipartbest.com/cliparts/ecM/d94/ecMd945ei.png" height="300px" class="imgoverflow">
    <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>
    </section>

    <section class="Parallax Parallax-image-2">
      <h1>Title Text</h1>
    </section>

    <section class="Parallax">
    <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>
  </section>
</div>

＆＃13;

Answer 1

实际上这不是视差;）

但是，为了得到你想要的东西，有三件事：

在.Parallax:before区域中将position: fixed更改为position: absolute
从overflow: hidden区域

.Parallax

添加到.Parallax-image-1:before和.Parallax-image-2:before以下规则：position: fixed

完成后，它将如下所示：

html, body {
  height: 100%;
}
body {
  background: #f6f6f6;
  margin: 0 0 0;
  padding: 0;
}
#content {
  position: relative;
}
.Parallax {
  position: relative;
  z-index: 2;
  width: 90%;
  padding: 5%;
  height: 600px;
}
.Parallax:before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: red;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;

}
.Parallax h1 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  color: #fff;
  width: 50%;
  height: 1em;
  text-align: center;
  z-index: 2;
}
p{
  color: #fff;
}
.Parallax-image-1:before {
  background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTqgknPHfXngK5Rm8foHqsR-K5J5yAKa-njp2XC5cGCjtmRo__KEw);
  position: fixed;
}

.Parallax-image-2:before {
  background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSwu_ZX03m-x1IOFgD38wHyuHkXbwSizX7PmHpW5phV3pQpoNqIpQ);
  position: fixed;
}
.imgoverflow{
height: 200px;
margin-top: -30vmin; 
}

如何覆盖这个视差？

1 个答案: