Question

我对一些新的CSS3背景命令感到困惑，想知道是否有人可以提供建议？

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

这是我想要实现的效果的一个例子，这是在＆lt;身体＆gt;标记http://www.css3.info/demos/background-size-contain.html

我遇到的问题是＆lt;身体＆gt;标签不需要高度或宽度定义，但是＆lt; 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>

Answer 1

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

如果你希望你的div与height: 100%一样大，那么

body就是你的选择，但诀窍是a percentaged height always comes from the parent's height。因此，您必须为所有父母（包括height: 100%）设置html以获得交叉浏览器结果。

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

jsFiddle Demo

CSS3 background-size：contains;

1 个答案: