CSS3 background-size：contains;

我有點卡住了一些新的CSS3背景命令，想知道是否有人可以建議？CSS3 background-size：contains;

我想創建一個具有動態縮放到屏幕/瀏覽器大小的背景圖像。

這裏就是我想實現的，這是對<體運行效果的例子>標籤http://www.css3.info/demos/background-size-contain.html

我遇到的問題是，< body>標籤不需要高度或寬度確定，但一個< DIV>做，這是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title>background-size: contain;</title> 
<style type="text/css"> 

#please_expand { 
background-image: url(images/betweengrassandsky.png); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-color: #EEE; 
background-size: contain; 
} 
</style> 

<body> 
<div id="please_expand"> 
    <h1>Example J - background-size: contain;</h1> 
</div> 
</body> 
</html>

來源

2012-05-15 kie

附加高度：100％和width：100％ – 2012-05-15 09:16:04

探索新的CSS3功能之前，它可能是值得學習的基礎知識。 – kapa

@bažmegakapa<<謝謝，我知道基本知識......是嗎？ ...建議的評論不起作用，我已經在發佈之前嘗試過。我正在試圖讓DIV表現得像BODY標籤，並有背景圖片填充整個頁面，動態調整 – kie

在塊元素（如div），高度不相同的方式工作的寬度。如果不指定高度，則該元素將與其內容一樣高。那是一回事。

height: 100%如果你想讓你的div大到body就是了，但訣竅是a percentaged height always comes from the parent's height。因此，您必須在所有父母（包括html）上設置height: 100%以獲得跨瀏覽器結果。

html,body,#please_expand { height: 100%; }

jsFiddle Demo

來源

2012-05-15 09:41:02 kapa

這就是票......只是一個旁註 - 重置如何？我不太瞭解身高100％，只是它從來沒有工作（不是我有很多原因使用它）。 – kie

@kie添加了一些解釋。 '身高：100％'總是有效的，你只需要知道它是如何工作的。它始終來自父元素的高度。如果它是'auto'，則它計爲零。 – kapa

謝謝，現在我明白了，那是一些非常有用的信息 – kie

CSS3 background-size：contains;

回答

相關問題