CSS3新增背景样式

background-clip

• 指定背景的填充范围，可指定为padding,border,content,分别表示填充至内边距，边框,默认为border。
• 值得注意的是在Firefox中该属性表现为-moz-background-clip,其他几个主流浏览器中表现为-webkit-background-clip

div{
  background:green;
  width:200px;
  height:300px;
  padding:30px;
  border:dashed 10px black;
  margin-left:30px;
  -webkit-background-clip:content;
  -moz-background-clip:content;
}

background-origin

• 在绘制背景图片时是默认从内部补白的左上角开始的，但我们可以利用这个属性对其做出改变
• 分别为padding,border,content,表示从内部补白、边框、内容区域左上角开始绘制

div{
-webkit-background-origin:padding;
-moz-background-clip:content;
}

background-size

• 该属性用于指定背景图片的的大小，有俩个参数分别为横向大小和纵向大小，当想要保持原图片大小比例时，可以只设置一个定值，另一个设置为auto

div{
background-size:30px auto;
}

同一元素内设置多张背景图片

• 在CSS3中可通过对关于背景图片的属性用逗号隔开，来对同一元素设置多个背景图片，如下：

div{
 background-image:url(1.png),url(2.png),url(e.jpg);
 background-repeat:no-repeat,repeat-x,repeat-y;
background-position:3% 98%,85%,center center;
}