3

我对一些新的 CSS3 背景命令有点坚持，想知道是否有人可以建议？

我正在尝试创建一个具有动态缩放到屏幕/浏览器大小的背景图像。

这是我想要实现的效果的示例，这是在 <body> 标签上运行的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>
4

1 回答 1

6

在块元素（如div）上，高度与宽度的工作方式不同。如果您不指定高度，则元素将与其内容一样高。那是一回事。

height: 100%如果您希望您的 div 尽可能大，body那将是一种方法，但诀窍是百分比高度始终来自父级的 height。因此，您必须为跨浏览器结果设置height: 100%所有父级（包括）。html

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

jsFiddle 演示

于 2012-05-15T09:41:02.357 回答