HTML標籤上的背景大小

我的問題是關於HTML標籤上的background-size CSS屬性。HTML標籤上的背景大小

爲什麼不下面的工作，

html { 
background: url(bg.jpg) no-repeat; 
background-size: 1500px 1500px; 
}

而這個工程，

html { 
background: url(bg.jpg) no-repeat; 
height: 1500px; 
}

來源

2015-03-30 Vinith Almeida

爲什麼要爲'html'設置樣式。我認爲它應該是'身體'？ – 2015-03-30 19:34:58

'background-size'和'height'是兩個完全不同的東西。你是否期待相同的背景？ – Shomz 2015-03-30 19:36:55

我會承擔一個瀏覽器的問題，因爲我已經嘗試過它，它確實工作.. – 9Deuce 2015-03-30 19:37:12

他們是兩個完全不同的事情：background-size表示放置在元素上的背景圖像的大小，而元素本身可以具有不同的尺寸（高度爲0將隱藏它，所以不顯示背景）。 height是相反的，它指定元素的高度，它與你放在它上面的背景大小無關。

在這裏看到的三個例子（如我上述兩個，並且一個用於表示適當的方式）：

html { 
 
    background: url(https://lh3.googleusercontent.com/-ixytPKZeKpM/AAAAAAAAAAI/AAAAAAAACjE/NlB_Rp_0Soc/photo.jpg) no-repeat right top; 
 
    background-size: 200px 200px; 
 
    } 
 
div { 
 
    background: url(https://lh3.googleusercontent.com/-ixytPKZeKpM/AAAAAAAAAAI/AAAAAAAACjE/NlB_Rp_0Soc/photo.jpg) no-repeat; 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 
#a { 
 
    height: 0; 
 
    background-size: 100px 100px; 
 
} 
 
#b { 
 
    height: 100px; 
 
    background-size: auto; 
 
} 
 
#c { 
 
    height: 100px; 
 
    background-size: 100px 100px; 
 
}

<html> 
 

 
<body> 
 
    <div id="a"></div> 
 
    <div id="b"></div> 
 
    <div id="c"></div> 
 
</body> 
 

 
</html>

此外，我已經添加了背景（和大小）到html元素本身，並且如您所見，它的行爲方式相同（Mario縮小到200x200而沒有問題）。

在這裏閱讀更多：

background-size

背景大小的CSS屬性指定的背景圖像的大小。圖像的大小可以完全限制或僅部分地保留其內在比例。

height

高度CSS屬性指定的元素的內容區域的高度。內容區域位於元素的填充，邊框和邊距內。

來源

2015-03-30 19:59:28 Shomz

謝謝。這有很大幫助。我有一個問題，但。假設背景圖像的高度爲1500px，而且屏幕上的圖像超出了視口，那麼我需要使用'height'屬性設置高度，對嗎？ – 2015-03-30 20:18:58

不客氣。很難在沒有先看到它的情況下爲您提供最佳解決方案，但假設100％身高和體重大小設置爲「自動100％」（如果您不介意拉伸，則甚至是「100％100％」）應該可以工作。看到這個：http://jsfiddle.net/jxa1yn2a/ – Shomz 2015-03-30 20:21:18

我創建了一個小提琴，http://jsfiddle.net/vinith98/c8vxxktd/，我是我做對了嗎？ – 2015-03-30 20:27:32

它的盒模型的一部分，高度修改框的高度，所以你不能看到過去的背景因爲背景僅用於html框。你肯定不希望被更改HTML框的高度

BG-尺寸可能無法在您使用的瀏覽器進行工作，在這裏檢查兼容性： http://www.w3schools.com/cssref/css3_pr_background-size.asp

來源

2015-03-30 19:35:23 gia

HTML標籤上的背景大小

回答

相關問題