尝试将相同的背景固定到伪元素时遇到麻烦

Question

目前我正在制作一个看起来像一面破镜子的 header，为了完成这个任务，我正在使用伪元素，这些伪元素会重复 parent 的相同背景图像并设置背景附件固定，另外我正在使用倾斜变换属性以便它具有滚动视差效果以及它执行的镜像效果。

问题是，当我向下滚动页面时，伪元素的背景显示为白色 space。我该如何解决？

codepen link 和图片如下：

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: 100%;
  font-family: "Roboto";
  text-decoration: none;
  box-sizing: border-box;
}

html, body { height: 100%; }

.mirror-header {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed / cover;
}

.mirror-header:before, 
.mirror-header:after {
  content: "";
  height: 200px;
  position: absolute;
  background-color: red;
  background: inherit;
}

.mirror-header:before {
  left: 0;
  transform: skewY(13deg);
  bottom: -80px;
  width: 50%;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6);
}

.mirror-header:after {
  right: 0px;
  width: 60%;
  height: 280px;
  transform: skewY(-10deg);
  bottom: -50px;
  box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8);
}

main .content {
  width: 100%;
  padding: 200px 40px 40px;
}

main .content h2 {
  text-align: center;
  font-size: 3em;
}

main .content p {
  margin-top: 20px;
  text-align: justify;
}

<header class="mirror-header">
  
</header>

<main>
  <section class="content">
    <h2>Some Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p>
  </section>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>

Scroll position bug IMAGE

Codepen Link

Answer 1

有趣的一个！

您需要为要倾斜的伪元素设置 transform-origin，否则背景在离屏渲染期间将无法正确显示。（如您所见。）

例如：

.mirror-header:after {
   ...
   transform-origin: 0% 100%;
}

.mirror-header:before {
    ...
    transform-origin: 100% 100%;
}

完成此操作后，您需要根据自己的喜好重新调整伪元素的位置。

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: 100%;
  font-family: "Roboto";
  text-decoration: none;
  box-sizing: border-box;
}

html, body { height: 100%; }

.mirror-header {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("http://res.cloudinary.com/dq5anctrd/image/upload/v1496258351/music-1970040_960_720_nqa715.jpg") no-repeat top fixed / cover;
}

.mirror-header:before, 
.mirror-header:after {
  content: "";
  height: 200px;
  position: absolute;
  background-color: red;
  background: inherit;
}

.mirror-header:before {
  left: 0;
  transform: skewY(13deg);
  bottom: -180px;
  width: 50%;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.6);
  transform-origin: 100% 100%;
}

.mirror-header:after {
  right: 0px;
  width: 60%;
  height: 280px;
  transform: skewY(-10deg);
  bottom: -150px;
  box-shadow: -2px 2px 14px rgba(0, 0, 0, 0.8);
  transform-origin: 0% 100%;
}

main .content {
  width: 100%;
  padding: 200px 40px 40px;
}

main .content h2 {
  text-align: center;
  font-size: 3em;
}

main .content p {
  margin-top: 20px;
  text-align: justify;
}

<header class="mirror-header">
  
</header>

<main>
  <section class="content">
    <h2>Some Title</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quis odit sunt, est, excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo! Excepturi dolores ipsam expedita rerum laborum odio tenetur sapiente nesciunt omnis veniam necessitatibus neque animi velit nemo</p>
  </section>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</main>

Working Codepen 从您的原始示例中分叉出来。

旁白：就个人而言，我会尝试使用 perspective/rotateY 而不是 skewY因为它可能会给你的镜子碎片带来更多的 "natural" 失真效果，但这是我的 $.02.

尝试将相同的背景固定到伪元素时遇到麻烦

I get a trouble when trying to set the same background fixed to the pseudo elements

javascript

html

css

parallax