CSS3背景大小 - 我可以保證覆蓋範圍嗎？

我有一個網站在整個頁面上使用圖片作爲背景。爲了做到這一點，我使用了新的CSS3規範「background-size」，它被設置爲「cover」。CSS3背景大小 - 我可以保證覆蓋範圍嗎？

background-image: url(/images/House-Remodel-Ideas2.jpg); 
background-repeat: no-repeat; 
background-size: cover;

一般來說這個工作得很好，但我注意到，如果窗口開始變得太窄（這在相當寬的圖像，因此，即使1024×768「過於狹隘」），則圖像停止填充頁面，相反，我看到了頁面的背景顏色。

這種破壞頁面的樣子。雖然我想我可以對圖片的大小和頁面的整體設計都有創意，但如果按預期工作，這將是很好的。對於圖像溢出或裁剪，我很滿意，但我不確定它太小而不顯示頁面背景。

有沒有一種方法可以設置這樣不會發生？

了一個實例，要求，所以...這裏是我使用的圖像： http://i.imgur.com/igLMC.jpg

這裏是HTML：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
body { 
    background-image: url(house.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-color: red; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

我把一個討厭的紅色背景的形象背後來展示問題。如果它工作正常，你不應該看到紅色。因此，運行上述內容，然後調整瀏覽器的大小以使其非常薄且高。照片下方會出現很多紅色。那就是問題所在。

作爲更新，經過更多測試，刪除DOCTYPE似乎可以解決問題。我不夠聰明，不能告訴你爲什麼。 :)

來源

2011-11-21 Todd Davis

感謝張貼這個問題。我不熟悉背景大小。我發現這個網站非常豐富：http://www.css3.info/preview/background-size/ – Micah

你可以發佈你所看到的屏幕截圖嗎？我似乎無法在Chrome中複製此內容。 –

@SteveAdams也許你可以發佈你自己的鏈接到一個測試用例，顯示它適合你。 – Phrogz

我還沒有實現一個css的唯一方法來做到這一點，但我曾經使用過後背的jQuery插件，並且它的工作全面。 http://srobbin.com/blog/easy-full-screen-background-images-with-jquery/

來源

2011-11-21 22:52:15 Brandon

謝謝。雖然它並沒有真正回答確切的（CSS）問題，但它確實讓我現在工作。我的想法是，CSS現在不打算這樣做。 –

不客氣。也許有一天，供應商都會達成一個標準，我們甚至不必擔心這樣的事情。 – Brandon

只需設置height或html的min-height：

html { 
 
    min-height: 100%; 
 
} 
 
body { 
 
    background-image: url(http://i.imgur.com/igLMC.jpg); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-color: red 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
</body> 
 
</html>

來源

2017-09-10 15:40:43 Zac

CSS3背景大小 - 我可以保證覆蓋範圍嗎？

回答

相關問題