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>
运行效果:
![background-2](/sites/default/files/inline-images/background-2.png)
评论