在flexbox列上產生視差效果

Question

用谷歌搜索，但是大多數主題是關於視差效果的，例如全角和/或高-例如標題。 我想要的是這個 。 如果您看一下左側欄中的“我們擅長”部分，就會產生視差效果。 我查看了他們的代碼，但是沒有機會了解他們在這里所做的事情，因此我認為只需使用flexbox就能正常工作。

現在，我設法使用flexbox和background-attachment: fixed;進行了視差效果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

修改后的代碼筆

 .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>