重看css权威指南 part7

  这一部分是关于颜色和背景。

  属性名：color

  值： | inherit

  应用于：所有元素

  继承性：有

  color影响文本的颜色，也会影响边框的颜色(这一点上章讲过)。

  属性名：background-color

  值： | transparent | inherit

  初始值：transparent

  应用于：所有元素

  继承性：无

  背景色指的是边框以内的部分的背景色。

  属性名：background-image

  值： | none |inherit

  初始值：none

  应用于：所有元素

  继承性：无

背景图默认会沿着水平和垂直方向平铺，要想改变平铺规则：

  属性名：background-repeat

  值：repeat | repeat-x | repeat-y | no-repeat | inherit

  初始值：repeat

  继承性：无

  应用于：所有元素

背景图默认会从元素的左上角开始平铺，若要改变开始位置：

  属性名：background-position

  值：百分数，长度单位 | left | center | right | top | bottom | inherit

  初始值：0% 0%

  应用于：块级元素和替换元素（替换元素怎么用?）

  继承性：无

  百分数参照：相对于元素和原图像上的相应点(这个暂时忽略吧，没看懂)

指定位置时通常指定两个值。第一个为水平方向，第二个为垂直方向，当只设置一个值时，另一个将默认为center。

使用百分数和固定长度时，允许是负值，具体计算方式暂时忽略。

当我们把背景定位在元素中间时，可能会有这样一种情况。元素太宽，出现滚动条。这使得背景图案刚开始对我们不可见。我们可以让背景相对于视口定位，而不是元素。为了达到这个效果：

  属性名：background-attachment

  值：scroll | fixed | inherit

  初始值：scroll

  应用于：所有元素

利用该属性，可以实现一些有趣的效果。当我们为背景图设置了fixed后，他将相对于视口定位，但他只会在包含他的元素中可见。这意味着，若为父元素和子元素应用同一图片的不同清晰度版本时，各个背景图将会完美得融合在一起，看上去就像隔了一层半透明的玻璃一样。示例

我们不需要一个一个去设置这些值：

  属性名：background

  值：{ color | image | repeat | attachment | position } | inherit

这里的color是指背景颜色background-color。我们建议当有背景图时，设置一个背景色。这样当背景图没有载入时，会显示背景色，不至于空白一片。