background-size 的其他两个可能的值是 contain 和 cover。
contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。
cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.box1,.box2,.box3{
width:150px;
height:150px;
border:1px solid black;
background-image:url(img/flower.gif);
background-repeat:no-repeat;
}
.box1{
background-size:contain; /*尽可能大*/
}
.box2{
background-size:cover;/*缩放至容器大小 */
}
.div-box{
/* border:1px solid red; */
float:left;
padding:15px;
margin-right:10px;
}
</style>
</head>
<body>
<h1></h1>
<div class="div-box">
<h2>background-color:contain:</h2>
<div class="box1">lorem ipsum dolor sitamet.</div>
</div>
<div class="div-box">
<h2>background-color:cover:</h2>
<div class="box2">lorem ipsum dolor sitamet.</div>
</div>
<div class="div-box">
<h2>background-color:未定义:</h2>
<div class="box3">lorem ipsum dolor sitamet.</div>
</div>
<div class="div-box" >
<p>原始图像</p>
<img src="img/flower.gif"></img>
</div>
</body>
</html>运行效果：
评论