颜色，背景和渐变
颜色
配色是网页设计的基础；CSS可以为任何元素设置前景色和背景色。
一般建议同时设定前景色和背景色
- 前景色：
前景指元素的文本，也包括元素四周的边框；
设置元素前景色最简单的办法是使用color属性；这个属性的值是一个颜色值，任何有效的类型都可以；
color属性的值将对四周的边框产生影响；边框的颜色取值于内容的颜色；前景色默认应用到边框上；这个行为的根源在于一个特殊的关键字currentColor,这个值始终为color属性的计算值；
理论上，CSS无法装饰置换元素(input表单)的内容；
color属性的定义指出，这个属性会被继承；
背景
默认情况下，背景区域从前景背后的空间一直延伸到边框的外边界。因此，内容框和内边距都在元素的背景中，而边框在背景之上绘制；
背景色background-color
元素的背景色使用background-color属性声明，值为任何有效的颜色值；此属性不继承，默认值为transparent透明；裁剪背景background-clip
backgroud-clip属性可以控制背景延伸到何处；默认值为boder-box，背景始终绘制到边框的可见部分背后;
可以选的值还有：padding-box 背景只延伸到边框的内边界；
content-box 背景限制在元素的内容区；
text 把背景裁剪到元素的文本线条；为文本添加纹理；
backgroud-clip对根元素(html或body)没有效果；原因与根元素的绘制方式有关；
如果元素有圆角，背景区域的实际裁剪范围也会有圆角；
backgroud-clip定义的背景裁剪区域，对其他背景属性没有影响；
- 背景图background-image
使用属性background-image属性可以把图像放到背景中；默认值是none，不需要背景图; 如果需要背景图，至少需要为这个属性提供一个可用的值；如：{background-image:url(1.png)}
任何元素，不管是块级元素还是行内元素，都可以设置背景图；
backgroud-image属性不继承，背景相关的属性都不继承；
使用背景图时最好同时指定背景色；
- 背景定位background-position
使用background-position属性可以指定图像的具体位置；
任何背景效果都建立在一个图像之上，这个图像称为源图像；源图像的位置由background-position属性指定，这个属性值有多种指定方式；
首先是关键字：top,bottom,left,right，center，通常关键字是成对出现的；其次是长度值； 最后是百分数；
位置关键字的顺序随意，只要不超过两个：一个指定横向位置，一个指定纵向位置；如果只有一个关键字，另一个默认是center;
百分数值的作用与关键字十分接近；百分数值同时应用到元素和源图像上；background-position属性默认值就是（0% 0%）
长度值是相对元素左上角的偏移。源图像的偏移点事左上角；
百分数值和长度值可以使用负值；
关键字，长度和百分数值可以混用；但是，关键字以外的值对轴的顺序有要求，如果使用长度值或百分数值，横向值必须写在首位，纵向值写个末位；
改变定位框background-origin
background-origin属性确定的计算源图像的位置是以什么的边界为基准，定义的是背景定位区域；默认值是padding-box的意思是源图像的左上角放在内边距的外边界的左上角；
border-box，源图像的左上角将放在边框的左上角；
content-box 源图像的左上角放在内容区域的左上角；背景重复方式backgroud-repeat
background-repeat的默认值是repeat,可选取值只有四个值，repeat,no-repeat,space,round,另外两个值repeat-x和repeat-y是其他组合值得简写；
如果提供两个值，第一个值应用于横向，第二个值应用于纵向；如果只有一个值，同时应用于横向和纵向；
repeat是沿所有方向无限平铺图像；
repeat-x和repeat-y分别在横向和纵向上重复图像；
no-repeat，不重复图像；
space 确定沿着某一轴能重复多少次，然后从背景区域的一边到对边均匀排列图像；如果图像太大，在某个方向放不下，那就只会出现一次；位置由background-position确定；
round的值在重复背景图的过程中会缩放图像；
- 背景粘符background-attachment
使用background-attachment属性可以把源图像声明为固定的视区中，从而免受滚动的影响；
默认值scroll,可选值还有fixed local;
使用fixed，源图像不会随文档一起滚动，源图像的位置由视区的尺寸确定，与元素的尺寸无关；
使用local，背景图随内容一起滚动，仅当元素的内容足够滚动时才有效果；
默认值scroll,背景图随着浏览器滚动文档时一起滚动；
- 背景图尺寸background-size
改变源图像及平铺时由它派生出来的图像的尺寸，使用backgroud-size属性；默认值是auto; 可以选值有，长度，百分数值，cover,contain;
background-size提供两个值时,第一个值是横向尺寸，第二个值是纵向尺寸；长度值和百分数值可以混用；
如果只提供一个值，设定的是横向尺寸，纵向尺寸将设为auto;
如果只想改变纵向尺寸，需要显示指定横向尺寸为auto;
如果一个轴的尺寸设为auto,另一轴不是，而且图像含有宽高比信息，那么设为auto的那个轴将根据另一个轴的尺寸和图像的宽高比计算；
如果想让图像完全覆盖元素的背景，而且不在乎部分图像超出背景绘制区域，可以使用cover;
contain会将图像缩放正好放在背景定位区域中的尺寸，运行部分区分不被图像覆盖；
- 简写属性background
背景相关的属性可以集中在一起，使用简写属性background声明；
backgroud的值是各个但是属性的值，这些值得顺序基本没有严格要求;
