1. 背景图片大小

使用 background-size 属性，能设置背景图片大小；
语法格式如下所示：

background-size:[<length> | <percentage> | auto] {1,2} | cover | contain
1

例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设定背景大小</title>
		<style>
			body{
				background-image: url(3.jpg);
				background-repeat: no-repeat;
				background-size:800px 700px;
			}
		</style>
	</head>
	<body>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

background-size 属性能设置一个或多个值，一个为必填，一个为选填；
第一个值指定图片宽度，第二个值指定图片高度；若只设定一个值，则第二个值默认为auto；

2. 背景显示区域

使用 background-origin 属性，能完成背景图片的定位；
默认情况下，background-position 属性总是以元素左上角原点作为背景图片定位，适应 background-origin 属性能改变这种定位方式；
语法格式如下所示：

 background-origin :border | padding | content
1

例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景坐标原点</title>
		<style>
			div{
				text-align: center;
				height: 500px;
				width: 416px;
				border: solid 2px blue;
				padding: 32px 2em 0;
				background-image: url(3.jpg);
				background-origin: padding;
			}
			div h1{
				font-size: 23px;
				font-family: "幼圆";
			}
			div p{
				text-indent: 2em;
				line-height: 2em;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div>
			<h1>竹源坑</h1>
			<p>	杀虎防咥人，芟蔓莫留根。</p>
			<p> 留根终遗患，伤心不可论。</p>
			<p>竹源数百家，今余几人存。</p>
			<p>竹外有源泉，血流泉水浑。</p>
			<p>群盗故比邻，姻娅如弟昆。</p>	
			<p>反戈相啖食，收骨无儿孙。</p>	
			<p>茕茕数寡妇，零落依空村。</p>	
			<p>凶年嗟半菽，撮土招游魂。</p>	
			<p>人亡亩税在，泪罢还声吞。</p>	
		</div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

3. 背景图像裁剪区域

使用 background-clip 属性，能裁剪背景图片；
语法格式如下所示：

background-clip :border-box | padding-box | content-box | no-clip
1

例子 3:：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景裁剪</title>
		<style>
			div{
				height: 500px;
				width: 390px;
				background-image: url(3.jpg);
				background-repeat: no-repeat;
				background-clip: content;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19