CSS学习笔记（三）--CSS样式之背景

1. 背景色

1. 全局背景色
   body {background-color: yellow}
2. 标记符元素背景色
   h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)}
3. 元素基于它们的类而被选择：
   p.no2 {background-color: gray; padding: 20px;}
   在正文中，
   

   这个段落设置了内边距。

2. 背景图像

1. 全局背景
   body {background-image: url(/i/eg_bg_04.gif);}
2. 部分元素背景
   p.flower {background-image: url(/i/eg_bg_03.gif);}
3. 背景重复

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。repeat 导致图像在水平垂直方向上都平铺。

4. 背景定位
   使用background-position

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

• 关键词定位置：top bottom center left right通过组合定图像位置

• 百分数定位置：background-position:50% 50%;
  图像中心与网页的中心对齐
  background-position 的默认值是 0% 0%
• 长度值定位置:设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

5. 背景关联
   文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失.background-attachment处理这种情况

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。修改为fixed，图像相对于可视区是固定的。