如何讓橫幅圖片在移動網站中出現故障

我希望我的橫幅圖像有點下滑，以便能看到主題的全部頭像。正如你在桌面版本中看到的，主題的頭部完全可見，但在網站的移動版本中，我看不到完整的頭部，也不能看到完整的圖像。如何讓圖像下降一點，以便看到完整的圖像？我的網站的網站desktop version of the website 如何讓橫幅圖片在移動網站中出現故障

HTML代碼

<header> 
     <div class="container"> 
      <div class="intro-text"> 
       <div class="intro-lead-in" style="font-family: 'Satisfy', cursive;">Welcome To ************</div> 
       <div class="intro-heading">The path you won't turn your back on</div> 
       <a href="#about" class="page-scroll btn btn-xl">About Us</a> 
      </div> 
     </div> 
    </header>

CSS代碼

header{ 
    background-image:url(../img/bg.jpg); 
    background-repeat:no-repeat; 
    background-attachment:scroll; 
    background-position:center center; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    background-size:cover; 
    -o-background-size:cover; 
    text-align:right; 
    color:black; 
} 
header .intro-text{ 
    padding-top:100px; 
    padding-bottom:50px; 

} 
header .intro-text .intro-lead-in{ 
    font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size:40px; 
    line-height:22px; 
    margin-bottom:20px; 
    text-align: right; 
} 
header .intro-text .intro-heading{ 
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight:800; 
    font-size:25px; 
    line-height:50px; 
    margin-bottom:50px; 
    text-align:right; 
    color: red; 
} 
@media (min-width:768px){ 
    header .intro-text{ 
     padding-top:350px; 
     padding-bottom:200px; 
    } 
    header .intro-text .intro-lead-in{ 
     font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-size:40px; 
     line-height:40px; 
     margin-bottom:25px; 
     text-align:right; 
    } 
    header .intro-text .intro-heading{ 
     font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
     font-weight:800; 
     font-size:25px; 
     line-height:75px; 
     margin-bottom:30px; 
     text-align: right; 
     color: red; 

    } 
} 

@media only screen and (max-width: 480px) { 
    header .intro-text{ 
    padding-top:140px; 
     padding-bottom:100px; 
     padding-left: 110px; 
    } 
    header .intro-text .intro-lead-in{ 
    font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style: italic; 
     font-size:26px; 
     line-height:22px; 
     margin-bottom:20px 
    } 
    header .intro-text .intro-heading{ 
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 

     font-weight:400; 
     font-size:17px; 
     line-height:18px; 
     margin-bottom:30px; 
     color: red; 
    } 
}

來源

2017-03-08 m.bo

添加'header {background-position：left top; }規則到您的媒體查詢移動。這將使圖像從左上角開始，而不是從中心開始。看到這個：https：//jsfiddle.net/abhitalks/93sbrt9s/ – Abhitalks

機會是它只是沒有足夠的填充容器元素/正文。但是，如果沒有非工作/工作代碼演示，這樣的問題很難診斷。 – Lewis

它沒有工作。照片出現在中心，並且所有文字都重疊，照片也沒有下來 –

也許是這樣的 Mobile version of the website

照片的移動版本

照片麼？

@media only screen and (max-width: 480px) { 
    body { 
     padding-top: 50px; // or your navbar height 
    } 
}

它將移動您的內容在移動50px下來。

來源

2017-03-08 15:50:44 janziemba

非常感謝。它做到了。 –

您可以更改移動設備中的背景位置。

@media screen and (max-width: 480px) { 
    header { 
     background-position: 0px 100px;//0px from left 100px from top 
    } 
}

編輯：或者您可以使用特定的圖像移動與良好的尺寸

來源

2017-03-08 15:54:56 PortePoisse

我認爲一兩件事，就可以解決這個問題，就是你刪除屬性「背景位置：中心中心; 「從主，並把它內部媒體查詢頁（移動設備，桌面）改變的ATTR背景位置的第二值的每個尺寸，港島線保持這樣樣品：

header{ 
 
    background-image:url('back.jpg'); 
 
    background-repeat:no-repeat; 
 
    background-attachment:scroll; 
 
    background-position:center center; 
 
    -webkit-background-size:cover; 
 
    -moz-background-size:cover; 
 
    background-size:cover; 
 
    -o-background-size:cover; 
 
    text-align:right; 
 
    color:black; 
 
} 
 

 
@media (min-width:768px){ 
 
    background-position:center 40px !important; 
 
} 
 

 

 
@media (min-width:480px){ 
 
    background-position:center 20px !important; 
 
}

對不起，我的英文，我希望這可以幫助你

來源

2017-03-08 16:08:04

如何讓橫幅圖片在移動網站中出現故障

回答

相關問題