設置爲100％高度的背景仍然重複

我有以下CSS代碼。設置爲100％高度的背景仍然重複

body{ 
    height: 100%; 
    min-height: 100%; 
    max-height: 100%; 
    background-color: #1468b3; 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1468b3)); 
    background-image: -webkit-linear-gradient(top, #2F2727, #1468b3); 
    background-image: -moz-linear-gradient(top, #2F2727, #1468b3); 
    background-image:  -ms-linear-gradient(top, #2F2727, #1468b3); 
    background-image:  -o-linear-gradient(top, #2F2727, #1468b3); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2F2727", endColorstr="#1468b3"); 
}

無論頁面內容如何，應該有一個很好的漸變，從瀏覽器窗口的頂部延伸到底部。這張截圖說明了問題：

enter image description here

我不太清楚爲什麼會這樣。

添加

no-repeat;

抵消了梯度，而是背景是固體#1468b3

來源

2012-11-06 rws907

嘗試增加html { height: 100%; }

來源

2012-11-06 22:32:57

完美，謝謝！ – rws907

說明：使用％縮放元素基於其父（'html'）大小的元素大小（在您的情況下，'body'）。默認情況下，'html'標籤有'height：auto'，所以你的'body'只佔用內容所需的空間。 **順便說一句**，因爲您似乎希望漸變保持固定在頁面上，您可能希望爲'body'樣式添加'background-attachment：fixed;'。 – joequincy

設置爲100％高度的背景仍然重複

回答

相關問題