一篇文章带你了解CSS3 背景知识（一）
CSS3中包含几个新的背景属性，提供更大背景元素控制。
一、浏览器支持
表中的数字指定完全支持该属性的第一个浏览器版本。
数字后面的 －webkit－ 或者 －moz－ 使用时需要指定前缀。
属性ChromeFirefoxSafariOperaIEbackground－image （多背景）4．09．03．63．111．5background－size4．0 1．0 －webkit－9．04．0 3．6 －moz－4．1 3．0 －webkit－10．5 10．0background－origin1．09．04．03．010．5background－clip4．09．04．03．010．5二、CSS3 多背景
CSS3允许你为一个元素添加多个背景图像， 通过使用 background－image 属性．不同的背景图像用逗号隔开，图像叠加在一起，
例：有两个背景图像，第一图像是背景图（在右下角）和第二图像是一个GIF动图（在左上角）。
代码如下：
＜！DOCTYPE HTML＞＜meta charset＝＂utf－8＂＞＜title＞项目＜／title＞＜head＞＜style＞ ＃example1 ｛
background－image： url（img／fy＿indexBg．jpg）， url（img／17I＿hd．mp4．gif）；
background－position： right bottom， left top； background－repeat：
no－repeat， repeat；｝＜／style＞＜／head＞＜html＞
＜body＞ ＜div id＝＂example1＂＞
＜h1＞Lorem Ipsum Dolor＜／h1＞ ＜p＞Lorem ipsum dolor sit amet，
consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad
minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞＜／body＞
＜／html＞
可以使用单独的背景属性（如上所示）或背景简写属性指定多个背景图像。
下面的例子使用了背景速记
（上面的例子，有相同的结果）
＃example1 ｛ background： url（img＿flwr．gif） right bottom no－repeat， url（paper．gif） left top repeat；｝1． CSS3 背景尺寸
CSS3 background－size 属性允许你指定背景图像的尺寸．
在CSS3之前的背景图像大小是图像的实际大小。CSS3允许我们使用背景图像在不同的上下文中。
size可以指定长度、百分比，或通过使用一个关键词： contain 或者 cover．
示例：图片背景图像比原图像小得多（以像素为单位）：
代码如下：
＜！DOCTYPE
html＞＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞项目＜／title＞
＜style＞ ＃example1 ｛ border： 1px solid black；
background：url（img＿flwr．gif）； background－repeat： no－repeat；
padding：15px； ｝
＃example2 ｛ border： 1px solid black；
background：url（img＿flwr．gif）； background－size： 100px 80px；
background－repeat： no－repeat； padding：15px；
｝＜／style＞＜／head＞＜body＞
＜p＞原背景：＜／p＞ ＜div id＝＂example1＂＞
＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum dolor sit amet，
consectetuer adipiscing elit， sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat．＜／p＞ ＜p＞Ut wisi enim ad
minim veniam， quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜p＞缩放背景图：＜／p＞
＜div id＝＂example2＂＞ ＜h2＞Lorem Ipsum Dolor＜／h2＞ ＜p＞Lorem ipsum
dolor sit amet， consectetuer adipiscing elit， sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat．＜／p＞
＜p＞Ut wisi enim ad minim veniam， quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat．＜／p＞ ＜／div＞
＜／body＞＜／html＞
background－size 属性两个可能值是：contain 和 cover．
含有关键词尺度的背景图像尽可能大的（但它的宽度和高度必须在内容区域）。因此，根据背景图像的比例和背景区的定位，有可能不被背景图像覆盖。
cover 关键词缩放背景图像，内容区域完全覆盖了背景图像（它的宽度和高度等于或超过该范围的内容）。因此，背景图像的某些部分可能不在背景区的定位是可见的。
下面的示例演示了使用contain和cover：
＃div1 ｛ background： url（img＿flower．jpg）； background－size： contain； background－repeat： no－repeat；｝＃div2 ｛ background： url（img＿flower．jpg）； background－size： cover； background－repeat： no－repeat；｝
