CSS3背景样式

1.背景大小：background-size

• CSS2.1是不能操作图片大小的，直到CSS3的这个属性出现，才可以操纵图片大小
• 语法：background-size：取值；（取值有两种方式）
  • 长度值，如px、em、%等
  • 使用关键字
    • cover，即“覆盖”，表示将图片等比缩放来填满整个元素（也就是盒子多大，就是占满整个盒子）
    • contain，即“容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止（也就是一旦等比缩放图片和边框重合就会停止缩放，也就是可能占不满全盒子）

2.背景位置：background-origin

• 定义背景图片是从什么地方开始平铺的，也就是定义背景图片的位置
• 语法：background-origin：取值（有三种取值）
  • border-box，从边框开始平铺
  • padding-box，从内边距开始平铺（默认）
  • content-box，从内容区开始平铺

3.背景剪切：background-clip

• 语法：background-clip：取值（有三种取值）
  • border-box，从边框开始剪切（默认）

• • padding-box，从内边距开始剪切
  • content-box，从内容区开始剪切

4.多背景图片

• 指的是该元素的背景图片不止一张（说白了就是用过个url导入图片，多个图片用逗号隔开就行了）

background:url() bottom left no-repeat,
           url() top right no-repeat