5-1背景相关的属性

背景的范围background-clip

background-clip: border-box;

background-clip: border-box;

background-clip: padding-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: content-box;

background-clip: padding-box;

background-clip: padding-box;

背景的绘制起点

background-origin: border-box;

background-origin: border-box;

background-origin: padding-box;

background-origin: padding-box;

background-origin: content-box;

background-origin: content-box;

background-origin: border-box;
background-clip: padding-box;

背景不包括边框，但是从边框开始绘制

背景图的大小

background-size: 50px 20px;

背景宽50px，高20px

background-size: 50px auto;

背景宽50px, 高auto

background-size: 80px;

只设置一个80px

background-size: 50% 50%;

背景宽50%，高50%

background-size: contain;
background-repeat: no-repeat;

background-size: contain;保持比例不变形

background-size: cover;
background-repeat: no-repeat;

background-size: cover;保持比例不变形

背景图的平铺选项

background-repeat: space;

background-repeat: space;通过调整位置使最后一个图完整显示

background-repeat: round;

background-repeat: round;通过调整每个图片大小可使最后一个图完整显示

多个背景图同时显示

        background-image: url("flower.jpg"), url("redBgFlower.jpg"), url("blackCat.jpg");
        background-repeat: no-repeat,repeat-x,no-repeat;
        background-position: 50% 50%, 0 0, 100% 0;
        background-origin:padding-box,padding-box, border-box;

多个背景图同时显示