伪元素实现视差效果

Question

我正在为客户的自定义CMS系统构建布局，所有内容都在Bootstrap行中构建，然后打印在容器中。客户想要能够创建有颜色的行，我使用伪元素来实现这一点，如下所示：

.full-row:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 100vw;
  height: 100%;
  background-color: inherit;
  content: '';
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

我希望采用相同的方法使客户能够制作视差行，但我无法让背景图像填充整个行的宽度，或者无法正确地定位它。

我已经创建了一个 CodePen 示例，其中彩色行起作用，但视差效果很差。有什么建议可以解决这个问题吗？

这是 code pen。

- Legarndary

Answer 1

一个解决方案是使用 left: -9999px; right: -9999px; 而不是宽度，但是使用这种方法会导致图像拉伸。你 HTML 结构的问题在于你在容器内使用了 .row 并对其使用了 position:relative;。如果你将行移出容器，你当前的代码就可以正常工作。

h3 {
  text-transform: uppercase;
  color: #fff;
}

header {
  padding-top: 80px;
  width: 100%;
  height: 50vh;
  color: #fff;
  background-position: center;
  background-image: url(http://i68.tinypic.com/2upfuk2.jpg);
  background-size: cover;
}

header h1 {
  text-transform: uppercase;
}

header .sub-headline {
  font-size: 20px;
  font-family: cursive;
}

.big-ass-icons {
  text-align: center;
}

.big-ass-icons .fa {
  font-size: 30px;
}

.big-ass-icons p {
  display: block;
  margin: 0 auto;
  width: 80%;
}

.dummie-col {
  height: 800px;
}


/* Helper classes */
.mar-b-30 {
  margin-bottom: 30px;
}

.mar-b-40 {
  margin-bottom: 40px;
}

.mar-b-50 {
  margin-bottom: 50px;
}

.mar-b-60 {
  margin-bottom: 60px;
}

.mar-b-70 {
  margin-bottom: 70px;
}

.pad-30 {
  padding: 30px 0;
}

.pad-40 {
  padding: 40px 0;
}

.pad-50 {
  padding: 50px 0;
}

.pad-60 {
  padding: 60px 0;
}

.pad-70 {
  padding: 70px 0;
}

.bg-gray {
  background-color: #f9f9f3;
}


/* Row handeling */
.full-row,
.parallax-row {
  position: relative;
}

.full-row:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 100vw;
  height: 100%;
  background-color: inherit;
  content: '';
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.parallax-row:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -9999px;
  right: -9999px;
  display: block !important;
  min-height: 100%;
  background-color: rgba(0, 0, 0, .7);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
  content: '';
}


/* More images to be added */
.image1:before {
  background-image: url(http://i68.tinypic.com/2z5m1hh.png);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<header class="mar-b-50">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Big A** Image</h1>
        <div class="sub-headline">How interesting</div>
      </div>
    </div>
  </div>
</header>
<section class="container">
  <div class="row big-ass-icons mar-b-40">
    <div class="col-sm-4">
      <span class="fa fa-pencil"></span>
      <h4>Highly editable</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="col-sm-4">
      <span class="fa fa-pencil"></span>
      <h4>Highly editable</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="col-sm-4">
      <span class="fa fa-pencil"></span>
      <h4>Highly editable</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
  <div class="row bg-gray full-row pad-40">
    <div class="col-xs-12">
      <h2>This is a colored row</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt at quos tenetur assumenda laudantium voluptatum laboriosam placeat rem earum, recusandae similique, et vero, doloremque possimus, fugit aliquam magni nulla! Sunt?</p>
    </div>
  </div>
  <div class="row pad-30">
    <div class="col-xs-12 text-center">
      <h2>This is just a white row</h2>
      <p>But it have two columns!</p>
    </div>
    <div class="col-sm-6">
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
    </div>
    <div class="col-sm-6">
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis illo sequi consectetur neque dignissimos animi eligendi, ab soluta laudantium minus autem non dolorem ut sint necessitatibus possimus sapiente pariatur voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod dolores perspiciatis doloribus voluptatem libero itaque, sapiente veniam error, autem, aliquid voluptatibus optio dolorum eaque eos quis facere voluptatum sed provident!</p>
    </div>
  </div>
  <div class="row parallax-row image1 pad-70">
    <div class="col-xs-12 text-center">
      <h3>Wuhuuuu, awesome parallax!</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 dummie-col">
      <h2>This is just to make the page long, for the parallax effect</h2>
    </div>
  </div>
</section>

- Adnan Akram

---

我知道容器的问题。不幸的是，行是由客户自己构建的 CMS 系统动态添加的。这就是为什么我使用伪元素解决方案。你的解决方案有点可行，但在我看来还不够好，它会造成巨大的水平滚动。 - Legarndary

如果你在一个宽度为100%的包装div上使用了overflow:hidden属性，那么滚动条就会消失。除此之外，我已经没有其他解决方法了 :) - Adnan Akram

Answer 2

也许这是个不太好的做法，但我要回答自己的问题。 问题出在背景位置单位上。我使用了vw来确定大小，所以定位应该使用相同的单位。 我添加了：

background-position: 50vw 0;

我也更新了笔

- Legarndary