CSS3 背景

背景

• 多背景

  • 使用逗号分开
    • background: url(1.jpg) no-repeat 0 0 ,url(2.jpg) 0 70%;
      • 表示第二个背景图为位置在left为0高度是70%的位置

• 背景尺寸

  • background-size: x y ;
    • background-size: 100% 100%; 表示沾满整个DIV
    • cover 放大
    • contain 缩小

• 背景原点

  • background-origin : border-box || padding-box|| content-box
  • border-box:从border区域开始显示背景
  • padding-box:默认就是从不包含border,也就是从padding区域开始显示背景
  • content-box:表示从内容区域开始。比如要是父元素用了padding,那么他就从内容区域开始

• 背景切割

• background-clip: border-box ||padding-box||content-box|| text

• border-box:从border区域向外边裁剪背景

• padding-box:从padding区域向外边裁剪背景

• content-box:从内容区域向外边裁剪背景

• text:只给文字加背景。文字以外的背景全部裁掉

苹果开机动画

    
    
    
    


苹果开机效果

效果图如下:

苹果开机.gif