CSS背景属性
1、background-attachment 属性
scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
inherit：规定应该从父元素继承 background-attachment 属性的设置。
body
{
background-image: url(bgimage.gif);
background-attachment: fixed;
}
2、background-clip 属性
border-box：背景被裁剪到边框盒。
padding-box：背景被裁剪到内边距框。
content-box：背景被裁剪到内容框。
div
{
background-color:yellow;
background-clip:content-box;
}
3、background-origin 属性
border-box：背景图像相对于边框盒来定位。
padding-box：背景图像相对于内边距框来定位。
content-box：背景图像相对于内容框来定位。
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
4、background-size 属性
length
设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
percentage
以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
例子1：
width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: border-box;
background-origin: border-box;
background-size: 100%;
如图：
例子2：
width: 500px;
height: 500px;
border: 15px double #0000ff;
padding: 20px;
background: #f0f url("img/panda.jpg") no-repeat;
background-clip: padding-box;
background-origin: content-box;
background-size: 100%;
如图：
如果 background-attachment 设置了 fixed 属性，则设置 background-origin 无效果。