背景圖像高度和覆蓋內容溢出並重復

我試圖用無框瀏覽器將背景圖像放到iPad屏幕上。背景圖像高度和覆蓋內容溢出並重復

然而，圖像的高度卻非常合適，寬度不會重複，圖像會重複，從而使頁面可以水平滾動。（我希望它是沒有重複的圖像單頁）。我可以知道我該如何適應寬度的圖像？

body { 
background-image: url("main.jpg"); 
-webkit-background-size: cover; 
-moz-background-size: cover; 
background-size: cover; 
}

與此同時，我有一個疊加內容，您可以在該框中單擊該框並顯示內容。但是，iPad上的覆蓋框太大了。覆蓋會影響背景嗎？我將如何讓它適合屏幕？

HTML 
<!-- The Modal --> 
    <div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
     <span class="close">&times;</span> 
     <img src="tyedit.jpg" /> 
      <div id="imagine"> 
       <span id="clicked">0</span><br/> 
       <span id="word">VOTES</span> 
      </div> 
    </div> 
    </div> 

CSS 
/* The Modal (background) */ 
.modal { 
display: none; /* Hidden by default */ 
position: fixed; /* Stay in place */ 
z-index: 1; /* Sit on top */ 
padding-top: 100px; /* Location of the box */ 
left: 0; 
top: 0; 
width: 100%; /* Full width */ 
height: 100%; /* Full height */ 
overflow: auto; /* Enable scroll if needed */ 
background-color: rgb(0,0,0); /* Fallback color */ 
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
} 

/* Modal Content */ 
.modal-content { 
position: relative; 
margin: auto; 
padding: 0; 
width: 70%; 
height: 100%; 
-webkit-animation-name: animatetop; 
-webkit-animation-duration: 0.4s; 
animation-name: animatetop; 
animation-duration: 0.4s 
}

來源

2017-02-06 Kayden

如果你想解僱重複。您需要設置no-repeat參考此鏈接

w3schools-backgroundrepeat-property

full tutorial for background

div { 
    background-image:url(smiley.gif); 
    background-repeat:no-repeat; 
    background-size: 100%; 
}

試試這個，回答哪些問題，你還是會遇到。我會回答這裏的答案

UPDATE

溢出問題爲iOS

-webkit-overflow-scrolling: auto

這裏指的webkit-overflow-scrolling

來源

2017-02-06 08:16:52 Kasnady

謝謝背景重複的工作！但是，溢出現在是垂直的，圖像寬度超出了正確的範圍，但沒有溢出。 – Kayden

你可以發佈一個片段嗎？所以我可以清楚地理解@ user2728875 – Kasnady

這是iPad無框瀏覽器上的屏幕截圖：http://imgur.com/OYZnjNb我設法修復了寬度問題，但背景圖像仍然允許垂直向下滾動，而不是在高度只是屏幕。 @AKZhang – Kayden

背景圖像高度和覆蓋內容溢出並重復

回答

相關問題