background相关属性

一、设置背景色：background-color


background-color: transparent || <color>

background-color其主要用来设置元素的背景颜色，其默认值为transparent（不设置任何颜色情况下是透明色），<color>用来设置背景色彩，常用的颜色格式为：颜色名：如“red”；rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%)；hls值hsl(0, 100%, 50%)，二进制值 #FF0000。在支持CSS3的浏览器中还可以使用rgba值rgba(255,0,0,1)。

二、设置背景图片:background-image


background-image: none || <url>
background-image其主要用来设置元素的背景图片，默认值为none，<url>是指背景图片的地址，这个地址可以是相对地址，也可以是绝对地址。


三、设置背景图片重复：禾王background-repeat


  background-repeat: repeat || repeat-x || repeat-y || no-repeat
background-repeat是用来设置background-image在元素中的铺放格式的，其默认为repeat，也就是背景图片沿元素的X轴和Ｙ轴同时平铺，另外几个值分别表示repeat-x：背景图片仅沿Ｘ轴水平平铺，repeat-y背景图片仅沿Ｙ轴平铺，no-repeat表示背景图片不做任何铺放格式设置。


四、设置背景图像是否固定或者随着页面的其余部分滚动:background-attachment


  background-attachment: scroll || fixed
background-attachment主要是用来设置背景图像是否固定或者随着页面的其余部分滚动，，其默认值为scroll，表示背景图片会随滚动条一起滚动，而取值fixed时，背景图片固定不动。


五、设置背景图片的位置background-position


   background-position: <percentage> || <length> || [left|center|right][,top|center|bottom]
background-position主要是用为设置背景图片的位置，其默认值为(0,0)||(0%,0%)||(left top),可以进行具体的百分数或数值设置，也可以使用left,center,top,right,top,bottom配合设置，而其中以下几种表示相同定位方式：


"top left","left top"和"0% 0%","0,0"代表元素的左上角；


"top","top center","center top"和"50% 0"表示在元素顶边居中位置；


"right top","top right"和"100% 0"代元素的是元素的右上角位置；


"left","left center","center left"和"0% 50%"表示在元素左边中间位置；


"center","center center"和"50% 50%"表示在元素中间位置；




"right","right center","center,right"和"100% 50%"表示在元素右边中间位置；


"bottom left","left bottom"和"0% 100%"表示在元素的左下角；


"bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置；


"bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置


六、设置背景图片的大小background-size


  background-size: auto || <length> || <percentage> || cover || contain
取值说明：


1、auto:此值为默认值，保持背景图片的原始高度和宽度；


2、<length>此值设置具体的值，可以改变背景图片的大小；


3、<percentage>此值为百分值，可以是0％?100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。


4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；


5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。


当background-size取值为<length>和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。

background-size和其他的一些CSS3属性一样，需要加上自己的别名，


   /*Ｍozilla*/
   -moz-background-size: auto || <length> || <percentage> || cover || contain
   /*Webkit*/
   -webkit-background-size: auto || <length> || <percentage> || cover || contain
   /*Presto*/
   -o-background-size: auto || <length> || <percentage> || cover || contain
   /*W3c标准*/
   background-size: auto || <length> || <percentage> || cover || contain