23-背景

背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

1.1 具体像素：
第一个参数:宽度
第二个参数:高度

 background size:200px 100px;

1.2 百分比：
第一个参数:宽度
第二个参数:高度

background-size:100% 80%;

1.3 宽度等比拉伸：
第一个参数:宽度
第二个参数:高度

 background-size:100px auto;

1.4 高度等比拉伸：
第一个参数:宽度
第二个参数:高度

 background-size:auto 100px;

1.5 cover：
cover含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度和高度都填满元素

 background-size:cover;

1.6 contain：
contain含义:
1.告诉系统图片需要等比拉伸
2.告诉系统图片需要拉伸到宽度或高度都填满元素

 background-size:contain;

告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示

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

背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景

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

多张背景图片之间用逗号隔开即可

注意点:
先添加的背景图片会盖住后添加的背景图片
建议在编写多重背景时拆开编写

 background-image: url("images/animal1.png"),
 url("images/animal2.png"),
 url("images/animal3.png");
 background-repeat: no-repeat, no-repeat, no-repeat;
 background-position: left top, right top, left bottom;
 }