css - 伪元素的视差效果

Question

我正在为客户自定义 cms 系统构建布局，所有内容都构建在引导行中，这些行打印在容器中。客户希望能够制作彩色行，我用这样的伪元素来管理它:

.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%);
}

我想采用相同的方法让客户端也能够制作视差行，但我无法让背景图像填满行的整个宽度，或者不能'似乎没有正确定位它。

我制作了一个代码笔来查看彩色行有效但视差效果很差的示例。有关如何解决此问题的任何建议？

这是 code pen

Answer 1

一个解决方案是使用 left: -9999px; right: -9999px; 而不是宽度，但通过使用此方法图像将拉伸(stretch)。 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>