background-size详解

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>background-size详解</title>
</head>
<body>
<script>
// 一：相关属性

// background-image: url(“./img/a.jpg”); //设置元素背景图片

// background-repeat： repeat/no-repeat； //设置背景图像的平铺方式 默认repeat

// background-position:left top; //设置元素的背景定位起点，默认值为left top

// background-size：auto; //设置背景图像的尺寸大小，默认值auto

// background-attachment：scroll； //设置元素背景图片是否为固定，默认值为auto

// background-clip：border-box; //控制元素的背景图像显示区域大小，默认值为border-box

// background-origin：padding-box； //控制元素的背景图像position的默认起始点，默认值为padding-box

// background-color：#abcdef; //设置背景颜色
</script>

<!-- 二：例子 -->

<style>
/* html{ height:100%; } */
/* 初始样式效果：图片按照原始大小进行展示 */
.demo1{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 	
}

/* 1.添加background-size:cover   效果：按照背景最长边进行按比例放大或缩小*/  
.demo2{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 
	background-size: cover;
}

/* 1.添加background-size:contain  效果：图片按照背景最短边进行按比例放大或缩小*/
.demo3{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 
	background-size: contain;	
}

/* 1.添加background-size:宽高百分比  效果：宽度和高度按照百分比进行填充*/
.demo4{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 
	background-size: 100% 100%;	
}

/* 2.添加background-position*/
.demo5{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 
	background-size:cover;
	background-position: center center;	
}

/* 2.添加background-origin*/
.demo6{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 
	background-size:100% 100%;
	background-origin: border-box ;	
}

/* 2.添加background-origin*/
.demo7{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 
	background-size:100% 100%;
	background-origin: content-box ;	
}

/* 2.添加background-clip*/
.demo8{
	width:600px;
	height:300px;
	padding:30px;
	border:10px solid red;
	background: url('list_1.png') no-repeat; 
	background-size:100% 100%;
	background-origin: border-box ;
	background-clip: content-box	
}
</style>
<div class="demo1">
	初始样式效果：图片按照原始大小进行展示
</div>
<div class="demo2">
	background-size:cover   <br>
	效果：按照背景最长边进行按比例放大或缩小
</div>
<div class="demo3">
	background-size:contain  <br>
	效果：图片按照背景最短边进行按比例放大或缩小
</div>
<div class="demo4">
	background-size:100% 100%  <br>
	效果：宽度和高度按照百分比进行填充
</div>
<div class="demo5">
	background-size:cover;<br>
	background-position: center center;
</div>
<div class="demo6">
	background-size:100% 100%;<br>
	background-origin: border-box ;
</div>
<div class="demo7">
	background-size:100% 100%;<br>
	background-origin: content-box ;
</div>
<div class="demo8">
	background-size:100% 100%;<br>
	background-origin: border-box ;<br>
	background-clip: content-box
</div>
</body>
</html>
猜你喜欢
