css3：与背景的相关样式

Posted 2020-08-04 孤岚

1、

(1)background-origin ： border-box | padding-box | content-box;（设置元素背景图片的原始起始位置。）

//需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。

 

(2)background-clip(用来将背景图片做适当的裁剪以适应实际需要。)

语法：background-clip ： border-box | padding-box | content-box | no-clip

 

 

2、

background-size（设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。）

语法：background-size: auto | <长度值> | <百分比> | cover | contain

//

1、auto：默认值，不改变背景图片的原始高度和宽度；

 

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

 

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

 

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

 

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

//

 

 

 

3、

multiple backgrounds（多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background

的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，

而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。）

例如{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;}