CSS背景设置background

background-color

值描述color_name规定颜色值为颜色名称的背景颜色（比如 red）。hex_number规定颜色值为十六进制值的背景颜色（比如 #ff0000）。rgb_number规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。transparent默认。背景颜色为透明。inherit规定应该从父元素继承 background-color 属性的设置。

background-image

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}
背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
repeat默认。背景图像将在垂直方向和水平方向重复。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。
背景定位

1. 通过关键字定位：top、bottom、left、right 和 center。
   
   根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
   
   如果只出现一个关键字，则认为另一个关键字是 center。
   
   也就是说，如果只声明一个方向的位置（如水平为left），那么默认另一个方向为center（也就是说垂直方向为居中，总体靠左居中）。
   
   
2. 按照百分数值来定位
   
   百分数值同时应用于元素和图像。
   
   比如设置百分比为30%，20%，那么将是让背景图片的（30%，20%）处的点与元素的（30%，20%）的点对应照齐。
   
   看示例：如何使用%来定位背景图像
   
   效果如图：
   
   

   如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

   background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

   
   
3. 长度值
   
   长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
   
   比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
   
   
   现在有一种情况，如果把数值设置为负的话，能怎么样呢？
   比如设置为：-50px  -50px，这样背景将会以 元素的左上角为参考点，向左和上分别移动50像素，这样背景将会超出元素一部分，那么超出的部分就不会显示了。

背景关联

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

值描述scroll默认值。背景图像会随着页面其余部分的滚动而移动。fixed当页面的其余部分滚动时，背景图像不会移动。inherit规定应该从父元素继承 background-attachment 属性的设置。

示例：设置固定的背景图像

background的这些参数都可以在设置在一个声明之中如：

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 

CSS3 background-clip 属性

规定背景的绘制区域：

div{background-color:yellow;background-clip:content-box;}

亲自试一试

值描述测试border-box背景被裁剪到边框盒。默认测试padding-box背景被裁剪到内边距框。测试content-box背景被裁剪到内容框。测试