本文共 957 字，大约阅读时间需要 3 分钟。

CSS 属性定义背景效果:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

背景颜色表示方法

1. 十六进制 - 如：”#ff0000”
2. RGB - 如：”rgb(255,0,0)”
3. 颜色名称 - 如：”red”

背景图像 - 水平或垂直平铺

1. background-repeat:repeat-x; 水平平铺
2. background-repeat:repeat-y; 垂直平铺

背景图像位置 - background-position 属性

1. 如果仅指定一个关键字，其他值将会是”center”
   left top
   left center
   left bottom
   right top
   right center
   right bottom
   center top
   center center
   center bottom
2. x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
3. xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
4. inherit 指定background-position属性设置应该从父元素继承

margin属性

1. margin:10px 5px 15px 20px;

   上边距是 10px
   右边距是 5px
   下边距是 15px
   左边距是 20px

2. margin:10px 5px 15px;

   上边距是 10px
   右边距和左边距是 5px
   下边距是 15px

3. margin:10px 5px;

   上边距和下边距是 10px
   右边距和左边距是 5px

4. margin:10px;

   所有四个边距都是 10px

代码示例：

     
Hello World!
背景图片不重复，设置 position 实例。
   
    背景图片只显示一次，并与文本分开。
   
实例中还添加了 margin-right 属性用于让文本与图片间隔开。

转载地址：http://xnmii.baihongyu.com/