1 使用css属性可以为一个元素的文本内容定义前景色和背景色，并且可以使用图片作为背景。css属性可以定位背景图形，可以实现连续重复背景，并且可以声明它应该相对于视点固定还是和 2 3 文档一起滚动。 4 5 1定义文字颜色 6 使用color属性来设置文本的前景色，默认值视客户端浏览器而定。 7 如：用来定义颜色为红色 8 div{color:#FF0000;} div{color:rgb(255,0,0);} div{color:rgb(100%,0,0);} 9 div{color:red;} div{color:hsl(0,100%,50%);} 10 11 2.定义背景 12 元素的背景可以是一种颜色或者是一个图片。在box模型中，背景是指内容和衬距区域内的背景，不包含边距和边框部分。边框的颜色、样式和宽度由边框属性设定，与背景无关。由 13 14 于边距总是透明的，因此父box的背景颜色和图片可以透出来。 15 2.1背景颜色（background-color） 16 background-color这个属性设置了一个元素的背景色，属性或者是一个颜色值或者是关键字transparent(透明) 17 18 2.2背景图片（background-image） 19 background-image这个属性设置了一个元素的背景图片。设置背景图片时，也应该同时设置一个背景色一考虑背景图片不可用的情况。如果背景图片可用，它在背景色之上 20 21 得到了呈现(因此，在图片透明区域，背景色是可见的) 22 如:div{backround-image:url(login.png);background-color:#ccFF66;} 23 css的背景层可以分为多层，各层上的背景相互叠加。使用background-image属性可以指定多个图片文件作为背景，只需要用逗号来分割各个图片。第一个声明的图片定位在 24 25 背景的顶层，其他图片按序在其下层排列。 26 27 2.3背景图片的大小（background-size） 28 这个属性用于设置背景图片的大小，可以使用关键字，也可以使用数字或百分比来指定。当使用数字或百分比值时，每一个图片都由两个值组成，使用空格隔开，前一个值 29 30 表示宽度，后一个值表示高度。 31 2.3.1关键字 32 （1）关键字contain表示将会缩放图片，在确保图片原始宽度和高度比例不变的情况下，同比例缩放到最大尺寸,以确保宽度和高度恰好适应背景定位区域。 33 （2）关键字conver表示将会缩放图片，在确保图片原始宽度和高度比例不变的情况下，同比例缩放到最小尺寸,以确保宽度和高度恰好覆盖背景定位区 34 2.3.2百分比值 35 百分比值是相对于背景定位区域大小而言的，属性值型如x%x%,中间有一个空格。不允许有负值 36 2.3.3长度值 37 属性值型如X X,中间有一个空格。不允许有负值 如：background-size:100px auto; 38 39 2.4背景重复方式（background-repeat） 40 background-repeat:如果定义一个背景图片，background-repeat属性可以指定图片是否平铺(重复)，以及如何平铺。所有的平铺将覆盖一个box的内容区和衬距区。 41 如果仅存在一个背景图片，该属性可以定义一个值，也可以定义两个值。定义两个值时，第一个表示水平方向，第二个表示 垂直方向。 42 background-repeat属性的属性值：no-repeat(表示背景图像不重复)、repeat(表示背景图像平铺。这是默认的初始值)、round(表示背景图像平铺，但是将会对图 43 44 像的平铺进行调整，会对图像进行缩放：如果平铺的区域不是图像幅面宽和高的倍数，就会自动缩放以达到倍数的要求。如果背景平铺区域比背景定位区大，就会填充背景平铺区域)、space 45 46 （表示背景图像平铺，但是将会对图像的平铺进行调整，会在图像之间填充空白） 47 48 2.5背景滚动模式（background-attachment） 49 设置了背景图片，background-attachment属性指定了背景图片的滚动模式，有三个值可以选择。fixed、local、scroll 50 （1）fixed：表示背景图片相对视点固定，视点一般就是浏览器窗口(如果使用了框架，那么还有可能是框架窗口)当滚动浏览器窗口时，元素内容滚动，但是元素 51 52 的背景不会随着滚动。元素滚动时，背景图片不会随着元素内容滚动。 53 （2）local：表示元素的内容如果可以滚动，背景图片随着元素内容滚动。并且当浏览器窗口滚动时，背景图片也会随着滚动。 54 （3）scoll：相对于元素内容固定，但是相对于视点可以滚动。 55 说明：无论背景图片是固定的还是可滚动的，它也只是在元素的内容和衬距区域内可见。并且，除非图片平铺，背景图片可能是不可见的，因为它滚动到内容和衬距区以外 56 57 的地方去了。 58 59 2.6背景定位（background-origin） 60 background-origin属性定义了背景定位区域，background-origin属性的属性值及其功能。 61 （1）border-box：定位相对于边框区域，即从border区域就开始显示背景 62 （2）padding-box:定位相对于衬距区域，即从padding区域就开始显示背景。这是默认值。 63 （3）content-box:定位相对于内容区域，即从content区域就开始显示背景 64 注意：如果background-attachment属性设置为fixed，那么该属性无效。 65 如果background-clip属性设置为padding-box，且background-origin属性设置为border-box，background-position属设置为topleft，那么元素有一个非0的边框， 66 67 此时将对背景图片的左上角进行剪裁。 68 69 2.7背景裁剪（background-clip） 70 此属性定义背景呈现的区域。background-clip属性的属性值及其功能描述。 71 (1)border-box:在边框外边缘以内区域呈现，这不会发生剪辑，因为是最大的呈现区域。这个是初始值 72 (2)padding-box：在衬距外边缘以内区域呈现，即border区域内的背景将会被裁剪 73 （3)content-box：在内容外边缘以内区域呈现，即border区域和padding区域内的背景将会被裁剪 74 75 2.8背景图片初始位置(background-position) 76 此属性指定背景图片的初始位置，每个位置友两个值组成，前面一个代表水平位置，后一个代表垂直位置。后面可以跟百分比，长度值，关键字，偏移量 77 3.透明度 78 透明度(opacity)属性可以在元素级别控制透明度。与RGBA值的alpha分量类似。opacity值是0-1范围之间的数字，可以表示为百分比或者十进制。opactiy属性在所有的元素上可用。