css3背景图原点

背景图原点指的是 背景图定位的时候 0 0（坐标轴的原点） 所默认的位置
如果图片平铺，那么border-box区域都是图片可以显示的区域

background-origin 改变背景图原点:

1. background-origin: padding-box(背景图以padding左上角为原点从padding左上角开始显示) ------ 默认原点（但是如果图片没有设置no-repeat 边框里也会显示背景图片 不过是图片平铺的部分 如果设置了no-repeat 图片超出的部分也会在边框内显示）

	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-origin: padding-box;
        }

	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 repeat;
            background-origin: padding-box;
        }

2. background-origin: content-box(背景图以内容区域左上角为原点在内容区域显示)

	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-origin: content-box;
        }

3. background-origin: border-box(背景图以外边框左上角为原点从边框左上角开始显示)

 	div {
            width: 500px;
            height: 500px;
            padding: 50px;
            border: 20px dotted #ccc;
            background: url(./img/jiufen.jpg) 0 0 no-repeat;
            background-origin: border-box;
        }