上滾動變化

Question

.page-children { 
 
    position: relative; 
 
} 
 
.page-children .page-child { 
 
    background: #333333; 
 
    height: 497px; 
 
    position: relative; 
 
} 
 
.page-children .page-child .project-wrap { 
 
    width: 100%; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center top; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
.overlay.black-thirty { 
 
    background: rgba(0, 0, 0, 0.25); 
 
} 
 
.overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.table-wrap { 
 
    display: table; 
 
    height: 100%; 
 
    margin: auto; 
 
} 
 
.page-children .page-child .project-wrap .project { 
 
    color: #ffffff; 
 
} 
 
.cell-wrap { 
 
    padding: 0; 
 
} 
 
.cell-wrap { 
 
    display: table-cell; 
 
    padding: 0 15px; 
 
    vertical-align: middle; 
 
} 
 
.page-children .page-child .project-wrap .project .section-title { 
 
    margin-bottom: 30px; 
 
} 
 
page-children .page-child .project-wrap .project .divider { 
 
    margin: 30px auto; 
 
}

<div class="page-children"> 
 
\t \t <!-- <div class="more-bar reg">Learn more about the Products we serve:</div> --> 
 
\t \t \t <div class="page-child"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="project-wrap" style="background-image:url(http://annlouise.com/wp-content/uploads/2015/03/Palm-fruit-oil-640x400.jpg); "> 
 
\t \t \t \t \t <div class="overlay black-thirty"> 
 
\t \t \t \t \t \t <div class="table-wrap"> 
 
\t \t \t \t \t \t \t <div class="cell-wrap project"> 
 
\t \t \t \t \t \t \t \t <div class="section-title">Palm Tree</div> 
 
\t \t \t \t \t \t \t \t <div class="divider teal"></div> 
 
\t \t \t \t \t \t \t \t <!-- <div class="section-label">one liner content here...</div> --> 
 
\t \t \t \t \t \t \t \t <a href="fatty_acid/index.html" class="btn white-to-red"> 
 
\t \t \t \t \t \t \t \t \t Learn More 
 
\t \t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
<div class="page-child"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="project-wrap" style="background-image:url(http://cdn2.stylecraze.com/wp-content/uploads/2015/04/Peach-Palm-Fruit.jpg); "> 
 
\t \t \t \t \t <div class="overlay black-thirty"> 
 
\t \t \t \t \t \t <div class="table-wrap"> 
 
\t \t \t \t \t \t \t <div class="cell-wrap project"> 
 
\t \t \t \t \t \t \t \t <div class="section-title">Palm Tree</div> 
 
\t \t \t \t \t \t \t \t <div class="divider teal"></div> 
 
\t \t \t \t \t \t \t \t <!-- <div class="section-label">one liner content here...</div> --> 
 
\t \t \t \t \t \t \t \t <a href="fatty_acid/index.html" class="btn white-to-red"> 
 
\t \t \t \t \t \t \t \t \t Learn More 
 
\t \t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
    </div>

圖像位置，這是我的DIV，在桌面屏幕完美的工作，而不是在移動設備上正常工作。移動屏幕上的問題是當我滾動頁面時圖像位置發生變化。

Answer 1

常見的問題涉及到

background-attachment: fixed; 

它在移動瀏覽器禁用。

你需要一些JavaScript來解決這個問題。