昨天学前端，看到 css中的background-size属性，忽然对cover、contain属性值有点蒙，具体到底什么显示效果有点糊涂。
看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：contain，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。
一、背景区域和背景图像宽高比例相等
在div中，设置其背景图像，如果图像的宽高比例和div区域的宽高比例相等，那么上述三种情况，背景图像都会铺满整个屏幕，显示效果没有什么区别。代码如下：
div{
background-image: url(img/776_580.png);
margin: 20px;
border: 1px solid #FF0000;
background-repeat: no-repeat;
width: 1164px;
height:870px;
}
这里使用的图像宽776px，高580px，div的宽度和高度是图像的1.5倍。
二、背景区域和背景图像宽高比例不相等
所设计案例完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size</title>
<style type="text/css">
div{
background-image: url(img/776_580.png);
margin: 20px;
border: 1px solid #FF0000;
background-repeat: no-repeat;
width: 1080px; /*div比较宽的情况*/
height:580px;
/*width: 776px;
height:780px;*/ /*div较高的情况*/
}
.proportion{
background-size: 100% 100%;
}
.contain{
background-size: contain;
}
.cover{
background-size: cover;/*铺满整个背景区域，图像显示不完整，图像不会变形*/
}
</style>
</head>
<body>
<p>
<img src="img/776_580.png" >
</p>
<div class="proportion">
</div>
<div class="contain">
</div>
<div class="cover">
</div>
</body>
</html>
下面是显示效果和对比所得的结论：
background-size: 100% 100%; 图像铺满整个背景区域，图像显示完整，图像有变形，水平方向或垂直方向有拉伸
background-size: contain; 图像不能铺满整个背景区域，区域右方或下方会有空白，图像显示完整，图像不会变形
background-size: cover;图像铺满整个背景区域，图像下端或右端显示不完整，图像不会变形
结合这个案例，再去看菜鸟教程的解释，应该就能清楚地理解它所说的含义了。
更多推荐
css中background-size属性cover、contain、100%的含义案例详解
发布评论