CSS3学习笔记（五）——与背景相关的样式

1、background-origin   设置元素背景图片的起始位置

div{
    width:100px;
    height:100px;
    border:1px solid red;
    padding:2px;
    background-origin:border-box | padding-box | content-box;/*默认值为padding-box*/
}

注：如果背景不是no-repeat，这个属性无效，它会从边框开始显示

 2、background-clip   将背景图片进行适当的裁剪(指定从什么位置开始裁剪)以适应实际需求  

div{
    width:100px;
    height:100px;
    border:1px solid red;
    padding:2px;
    background-origin: border-box;
    background-clip:border-box | padding-box | content-box| no-clip;
    /*(1)默认值为border-box*/
    /*(2)no-clip效果与border-box相同*/
}

效果示例：

3、background-size   设置背景图片的大小，可以是px或者百分比，还可以是cover和contains来对图片进行伸缩

.demo {
    background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    background-size:auto|10px 10px|70%|cover|contain;
}

注：

（1）<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

（2）cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

（3）contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

4、multiple backgrounds   多重背景

也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

例子：

.demo{
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    
    background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
                      url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
                      url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
    background-position: left top, 100px 0, 200px 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
    
    margin:0 0 20px 0;
}

笔记整理出自：https://www.imooc.com/learn/33