1.2 背景

• background-image 多背景
• background-size 大小
• background-Origin 背景位置
• background-clip

background-image 多背景

• 可以贴多张图片，按顺序；

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid red;
background-image: url('border.png'),url('icon.png');
background-position: top;
background-repeat: repeat;">

</div>

• 升级版

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid red;
background: url('border.png') top repeat-x, url('icon.png') left repeat;">

</div>

background-size 大小

• 把图片缩放成指定大小，再做背景；

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid red;
background: url('border.png') top repeat-x, url('icon.png') left repeat;
background-size:40px 40px;">

</div>

background-Origin 背景位置

• 选择背景填充位置（content-box、padding-box、border-box）

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid red;
background: url('border.png') top repeat-x, url('icon.png') left repeat;
background-size:40px 40px;
background-Origin:border-box;">

</div>

background-clip

• 选择背景裁剪位置（content-box、padding-box、border-box）

<div style="width: 300px;height: 100px;margin: 40px auto;padding: 20px;border: 10px solid red;
background: url('border.png') top repeat-x, url('icon.png') left repeat;
background-size:40px 40px;
background-Origin:border-box;
background-clip:content-box;">