背景图片相关

背景尺寸属性

• CSS3中新增的一个属性, 专门用于设置背景图片大小
• 格式：
• background-size:宽度 高度;
• 取值：
• 具体像素
• 百分比
• 宽度等比拉伸(auto 100px)
• 高度等比拉伸(100px auto)
• cover(1.告诉系统图片需要等比拉伸2.告诉系统图片需要拉伸到宽度和高度都填满元素)
• contain(1.告诉系统图片需要等比拉伸2.告诉系统图片需要拉伸到宽度或者高度都填满元素)

背景图片定位区域属性

• 告诉系统背景图片从什么区域开始显示
• 格式：
• background-origin
• 取值：
• padding-box（默认情况下就是从内边距区域开始显示）
• border-box（从边框区域开始显示）
• content-box（从内容区域开始显示）

背景绘制区域属性

• 专门用于指定从哪个区域开始绘制背景的（背景颜色）
• 格式：
• background-clip
• 取值：
• padding-box（从内边距区域开始绘制背景）
• border-box(默认情况下会从边框区域开始绘制背景)
• content-box（从内容区域开始绘制背景）

多重背景图片

• 多张背景图片之间用逗号隔开即可
• 例如：
  background-image:url("images/animal1.png"),url("images/animal2.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
• 注意:
• 先添加的背景图片会盖住后添加的背景图片
• 建议在编写多重背景时拆开编写