css中background-size属性cover、contain、100%的含义案例详解

最新推荐文章于 2024-04-29 21:14:52 发布

蒲公英1001

最新推荐文章于 2024-04-29 21:14:52 发布

阅读量7.3k

点赞数 7

文章标签： css css3

本文链接：https://blog.csdn.net/wangyining070205/article/details/113805931

版权

昨天学前端，看到 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;图像铺满整个背景区域，图像下端或右端显示不完整，图像不会变形

结合这个案例，再去看菜鸟教程的解释，应该就能清楚地理解它所说的含义了。
在这里插入图片描述

蒲公英1001

关注

7
点赞
踩
24

收藏

觉得还不错? 一键收藏
2
评论
css中background-size属性cover、contain、100%的含义案例详解

昨天学前端，看到 css中的background-size属性，忽然对cover、container属性值有点蒙，具体到底什么显示效果有点糊涂。看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：container，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。一、背景区域和背景图像宽高比例相等在div中，设置其背景图像，如果
复制链接

扫一扫