今天小编给大家精心推荐个CSS颜色和背景属性教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~
在讲述字体属性时就已经提到过，一个文档的字体和颜色都能够直接对文档的外观产生很大的影响，因此，颜色的背景属性也是我们需要详细研究和说明的。
在CSS属性中，通常 color 特指前景的颜色，而 background 可以是背景颜色或者是背景图案。在定义背景图案时，我们可以指定该图片的确切位置、是否重复显示，以及它是否被固定或随页面上的内容滚动。
color
属性值：color
初始值：由 UA 默认值制定
适用于：所有元素
继承：是
百分比值：不适用
该属性描述了一个元素中文本的颜色，也叫做前景色。如果要把文本设为红色，下面是两种方法。EM{}*使用普通的关键字来定义，这些关键字可以被我们读懂*{(,,)}*使用 RGB 值来定义，每个 RGB 值从0到255*/
background-color
属性值：color | transparent
初始值：transparent
适用于：所有元素
继承：是
百分比值：不适用
“background-color”设置了元素的背景色。
background-image
属性值：url | none
初始值：none
适用于：所有元素
继承：否
百分比值：不适用
这个元素设定了一个元素的背景图案。需要注意的是在设置背景图案时，对于背景色必须一同设置。因为有时这些图案会因为某些原因不可用，此时可以用背景色代替，而且背景色的颜色要与背景图案颜色相似。
background-repeat
属性值：repeat | repeat-x | repeat-y | no-repeat
初始值：repeat
适用于：所有元素
继承：否
百分比值：不适用
在背景图案设置的情况下，设置“background-repeat”可以决定图案是否重复显示或者以怎样的方式重复。
如果属性值是“repeat”，那就意味着图片在水平和垂直方向上都重复排列。
如果属性值是“repeat-x”，表示水平重复排列。
如果属性值是“repeat-y”，表示垂直重复排列。
如果属性值是“no-repeat”，表示不重复。
background-attachment
属性值：scroll | fixed
初始值：scroll
适用于：所有元素
继承：否
百分比值：不适用
在背景图案已经设置的情况下，通常这些图案有两种依附方式：
1.一种是背景图案永远静止，文字在背景上面“滚动”；
2.另一种是背景图案随着页面上的文字一起“滚动”。
background-position
属性值：[percentage | length] {1,2} | [top | center | bottom] || [left | center | right]
初始值：0% 0%
适用于：块级和可替换元素
继承：否
百分比值：参照元素本身的尺寸
在背景图案已经设定的情况下，background-position指定了它的初始位置。如果设定的属性值是“0% 0%”，那么意味着图片左上角与该元素的左上角重合，如果设定的属性值是“100% 100%”，那么意味着图片右下角与该元素的右下角重合，以此类推。在设定背景图片位置的时候，还可以使用关键字来定义一些特殊的位置，下面是一些关键字以及相应的尺寸：
“top left”和“left top”＝“0% 0%”；
“top”、“top center”和“center top”＝“50% 0%”；等等。
