CSS—background

---

css允许使用纯色作为背景，同样也允许使用图片作为背景。
关于背景的设置：

• background-color
  background-color:red;
  —注意：background-color不能继承，其默认值是transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

• background-image
  background-image:url(lks.jpg);
  —注意：背景图片也是不能继承的，而且背景图片无法设置大小。
  浏览器对图片格式的支持情况：

  • gif 动画 256种颜色

• jpg 颜色丰富，浏览器支持效果好

• png w3c推荐的格式，但是浏览器支持的不太好（IE6，IE7，不支持）。

• background-repeat
  background-repeat:repeat; //默认 背景图像将在垂直方向和水平方向重复。
  background-repeat:repeat-x; //背景图像将在水平方向重复。
  background-repeat:repeat-y; //背景图像将在垂直方向重复。
  background-repeat:no-repeat; //背景图像将仅显示一次。

• background-attachment
  background-attachment:scroll; //默认值。背景图像会随着页面其余部分的滚动而移动。
  background-attachment:fixed; //当页面的其余部分滚动时，背景图像不会移动。

• background-position
  —注意：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

  • background-position：top left；
    第一个是指垂直方向上，第二个是指在水平方向上，中间空格隔开。
    垂直方向上可以设置：top、center、bottom；
    水平方向上可以设置：left、 center 、right；
    如果您仅规定了一个关键词，那么第二个值将是"center"。
  • background-position：50% 50%；
    默认值：0% 0%。
    第一个值是水平位置，第二个值是垂直位置。
    左上角是 0% 0%。右下角是 100% 100%。
    如果您仅规定了一个值，另一个值将是 50%。
  • background-position：20px 30px；
    第一个值是水平位置，第二个值是垂直位置。
    左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
    如果您仅规定了一个值，另一个值将是50%。

注意：

1、当我们为body设置border后，我们会发现border只是圈住了body里面有内容的地方。但是为body设置背景色，则填充整个屏幕。
2、使用图像作为背景时，图像他的定位是参照屏幕的可视区域，而不是被border框住的部分。
3、当我们想要一次性设置背景时，我们顺序是有考究的。
background：red url(xin.jpg) norepeat fixed center center;
每个参数使用空格隔开，依次是颜色，图片，重复，固定方式，位置。
事实上，我在浏览器中对他们的位置进行了各种颠倒后，发现IE6、IE7不是能很好的支持乱序后的设置，但是现代浏览器还是可以支持的。为了兼容性的考虑，建议使用上面的顺序。

欢迎补充与指正☺