day23-CSS-背景相关属性

背景尺寸属性

• CSS3中新增属性，专门用于设置背景图片大小
• 取值background-size：x轴 y轴
  • 默认
  • 具体像素
  • 百分比
  • 宽度等比拉伸---谁auto设置谁等比例拉伸，保证不变形
  • 高度等比拉伸---谁auto设置谁等比例拉伸，保证不变形
  • cover
    • 图片需要等比拉伸
    • 高度和宽度都填满整个网页
  • contain
    • 图片需要等比拉伸
    • 高度或宽度满足时则不拉伸了

背景图片定位区域属性

• background-origin--告诉系统背景图片从哪个区域开始显示
  • 默认是从padding处开始显示
• padding-box
• border-box
• content-box

背景绘制区域属性

• background-clip--告诉系统背景从哪个区域开始绘制的
  • 默认背景颜色是从boder处开始绘制
• padding-box
• border-box
• content-box

CSS3多重背景图片

• 多张背景图片之间用逗号隔开
  • 先添加背景图片的会覆盖着后添加的背景图片
  • 可以用定位top left等进行定位
• 注意点：
  • 多重背景图片不利于阅读，建议拆开来写
  • background-image：图片1，图片2，
  • background-repeat：图片1no-repeat，图片2no-repeat
  • background-position：left top，right top，