伪元素的视差效果

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

我想用同样的方法让客户端也能做到parallax rows，但我无法让背景图片填满行的整个宽度，或者看起来无法以正确的方式定位它。

我做了一个代码笔来查看彩色行有效但视差效果很差的示例。关于如何解决这个问题有什么建议吗？

这是code pen

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>

Answer 2

也许是一个鸡巴动作，但我要回答我自己的问题。问题是背景位置单位。我用的是vw来做size所以定位的单位应该是一样的。

我补充了：

background-position: 50vw 0;

I also updated the pen

伪元素的视差效果

Parallax effect with pseudo elements

css

background-image

background-position

parallax