如何在桌面等移動設備上設置頁腳視差效果？

我有背景圖像和頁腳與視差效果，這是完美的桌面上工作，但它不適用於移動設備。我無法滾動背景圖片來顯示頁腳。我需要滾動圖像來檢查桌面的頁腳。你能幫我嗎？如何在桌面等移動設備上設置頁腳視差效果？

CSS

body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

    #content { 
     background-image: url('http://7606-presscdn-0-74.pagely.netdna-cdn.com/wp-content/uploads/2016/03/Dubai-Photos-Images-Travel-Tourist-Images-Pictures-800x600.jpg'); 
     background-size: cover; 
     width: 100%; 
     height: auto !important; 
     background-position: center; 
     min-height: 100%; 
     margin-bottom: 180px; 
     z-index: 1; 
     background-repeat: no-repeat; 

    } 

    #footer { 
     position:fixed; 
     bottom:0; 
     left:0; 
     width:100%; 
     height:200px; 
     z-index:-1; 
     background-color:#000; 
     color: #fff; 

    } 

.column-left{ float: left; width: 33%; } 
.column-right{ float: right; width: 33%; } 
.column-center{ display: inline-block; width: 33%; } 
.column-left, .column-right, .column-center 
{ 
    margin-top: 30px; 
}

HTML

<div id="content"> 
</div> 
    <div id="footer"> 
     <p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 

     <p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

     <p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 

    </div>

來源

2017-03-18 Narendra Verma

你的代碼只是包括頁腳部分添加剩餘的代碼。 – frnt

我忘了添加一個div。我現在加了。 –

聲明height，我無法找到上述工作連碼large resolution，所以通過聲明高度#content它的工作。

body{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#content { 
 
     background-image: url('http://placehold.it/1600x1600'); 
 
     background-size: cover; 
 
     width: 100%; 
 
     height: 100vh; 
 
     background-position: center; 
 
     margin-bottom: 180px; 
 
     z-index: 1; 
 
     background-repeat: no-repeat; 
 
    } 
 

 
    #footer { 
 
     position:fixed; 
 
     bottom:0; 
 
     left:0; 
 
     width:100%; 
 
     height:200px; 
 
     z-index:-1; 
 
     background-color:#000; 
 
     color: #fff; 
 
    } 
 

 
.column-left{ float: left; width: 33%; } 
 
.column-right{ float: right; width: 33%; } 
 
.column-center{ display: inline-block; width: 33%; } 
 
.column-left, .column-right, .column-center 
 
{ 
 
    margin-top: 30px; 
 
} 
 
@media screen and (max-width:640px){ 
 
    #content{ 
 
     height: 100vh; 
 
    } 
 
}

<div id="content"> 
 
<div id="footer"> 
 
    <p class="column-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
 

 
    <p class="column-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 

 
    <p class="column-center" >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 

 
</div> 
 
</div>

來源

2017-03-18 06:50:06 frnt

@Narendra Verma希望這能奏效。 – frnt

Mr.frnt，它不適用於手機。我無法滾動背景圖片 –

@NarendraVerma你可以創建一個jsFiddle。檢查這個jsFiddle https://jsfiddle.net/bpzxva4r/它工作正常。 – frnt

如何在桌面等移動設備上設置頁腳視差效果？

回答

相關問題