在flexbox列上产生视差效果

Question

用Google搜索，但大多数主题都是关于视差效果，包括全宽和/或高度 - 例如对于标题。我想要的是this。如果您看一下左栏中的“我们擅长”部分，就会产生视差效果。我查看了他们的代码，但是我无法理解他们在那里所做的事情，所以我认为只需使用flexbox即可。

现在，我设法使用flexbox和background-attachment: fixed;进行视差效果，但图像看起来很奇怪;它会放大并且不能正确居中。这是它的样子：

这是它应该是这样的：

这是代码的一部分：

HTML：

<section class="section-skills">
  <div class="item pri"></div>

CSS：

.section-skills{
    display:flex;
    padding-top: 40px
}

.item{
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pri{
    background-image: url(img/skills-007.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 567px;
    width: 100%;
}

这是一个CodePen：http://codepen.io/anon/pen/VPVmLb

有什么我想念的吗？或者我不应该使用flexbox进行视差？

Answer 1

revised codepen

.section-skills {
  display: flex;
  padding-top: 40px;
}
.item {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pri {
  background-image: url(http://placehold.it/800x600);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 567px;
  width: 100%;
}
.sec {
  background: #f7f7f7;
  align-items: flex-start;
}
.skills-box {
  width: 85%;
  margin-top: 90px;
  padding-left: 10%;
}
.skills-box .sub-text:after {
  margin-left: 0;
  margin-top: 30px;
}
.skills-box h2,
.skills-box .sub-text {
  text-align: left;
}
.skills-box .sub-text {
  margin-left: 0;
  width: 80%;
}
.sec h3 {
  font-weight: 400;
  font-size: 130%;
}
/* Skill Bars */

.skillbar {
  position: relative;
  display: block;
  margin-bottom: 25px;
  width: 100%;
  background: #eee;
  height: 45px;
  border-radius: 3px;
  transition: 0.4s linear;
  transition-property: width, background-color;
}
.skillbar-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 110px;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  background: #6adcfa;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.skillbar-title span {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  height: 45px;
  line-height: 45px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.skillbar-bar {
  height: 45px;
  width: 0px;
  background: #6adcfa;
  border-radius: 3px;
}
.skill-bar-percent {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 11px;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  color: rgba(0, 0, 0, 0.4);
}

<section class="section-skills">
  <div class="item pri"></div>
  <div class="item sec">
    <div class="skills-box">
      <h2>WE ARE GOOD AT</h2>
      <p class="sub-text">Morbi tempor elit leo, eget mattis massa porta ac</p>
      <div class="skillbar clearfix " data-percent="90%">
        <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span> 
        </div>
        <div class="skillbar-bar" style="background: #e67e22;"></div>
        <div class="skill-bar-percent">90%</div>
      </div>
      <!-- End Skill Bar -->
      <div class="skillbar clearfix " data-percent="85%">
        <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span>
        </div>
        <div class="skillbar-bar" style="background: #3498db;"></div>
        <div class="skill-bar-percent">85%</div>
      </div>
      <!-- End Skill Bar -->
      <div class="skillbar clearfix " data-percent="60%">
        <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span>
        </div>
        <div class="skillbar-bar" style="background: #2c3e50;"></div>
        <div class="skill-bar-percent">60%</div>
      </div>
      <!-- End Skill Bar -->
      <div class="skillbar clearfix " data-percent="75%">
        <div class="skillbar-title" style="background: #46465e;"><span>PHP</span>
        </div>
        <div class="skillbar-bar" style="background: #5a68a5;"></div>
        <div class="skill-bar-percent">75%</div>
      </div>
      <!-- End Skill Bar -->
    </div>
  </div>
</section>