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

昨天学前端,看到 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倍。
css中background-size属性cover、contain、100%的含义案例详解_第1张图片

二、背景区域和背景图像宽高比例不相等

所设计案例完整代码如下:


<html>
	<head>
		<meta charset="utf-8">
		<title>background-sizetitle>
		<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%的含义案例详解_第2张图片

你可能感兴趣的:(css,css3)