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

我想采用相同的方法让客户端也可以制作parallax rows，但我无法获得背景图像以填充行的整个宽度，或者可以＆＃39;似乎以正确的方式定位它。

我已经制作了一个codepen来查看彩色行有效但是视差效果很糟糕的例子。有关如何解决此问题的任何建议吗？

先谢谢

这里是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来制作尺寸，所以定位应该是相同的单位。

我补充说：

background-position: 50vw 0;

I also updated the pen

伪元素的视差效应

2 个答案: