背景大小CSS3工作時非常怪異的行爲

Question

我最近了解了background-size財產感謝這個話題

Set size on background image with CSS?

正如您可以猜到，我試圖做一個背景圖片佔滿整個屏幕並不多/不少。這裏是我的小提琴

https://jsfiddle.net/1x7ytdaa/

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')"; 
document.body.style.backgroundSize = "contain"; 

這裏是什麼contain財產確實

縮放圖像的最大尺寸是這樣的，它的寬度和高度都能夠適合內容區域內

它不應該的問題的圖像是什麼規模。如果它更小，它應該縮放到屏幕的全尺寸。如果它更大，則應該縮小比例。

在小提琴中，您可以看到圖像水平重複5次，垂直重複5次。

我試過100% 100%和而寬度拉伸全屏，它仍然顯示同一圖像5 1/2倍垂直

我無法解釋這種現象。有沒有人有任何想法？

Answer 1

兩件事情：

• 背景重複
• 寬度和身體

的高度，你可以在an edited fiddle，問題是background-repeat的默認值是repeat。因此，圖像將被重複而不是被拉伸。但是，這並不能解決所有問題，因爲body和HTML元素的寬度應該定義爲100％。

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')"; 
document.body.style.backgroundSize = "contain"; 
document.body.style.backgroundRepeat = "no-repeat"; 

如果要覆蓋整個屏幕，請使用cover而不是包含。封面確保元素被完全覆蓋，而包含只是確保背景圖像被最大限度地包含（這可能會導致空白）。

Answer 2

這可能幫助：

position: fixed; 
background-position: center; 
overflow-x: hidden; 
width: 100%; 
height: 100%; 
background: url(img/xxx.jpg); 
background-size: 100%; 
background-attachment: fixed; 
overflow-y: scroll;