CSS基础学习2-CSS设置颜色与背景_css设置背景颜色的亮度

本文详细介绍了CSS中颜色与背景的基本设置方法，包括字体颜色、背景颜色、背景图片、背景重复方式、背景固定设置及背景位置等，并提供了具体的HTML与CSS示例代码。

所有CSS基础学习文档下载地址：http://download.youkuaiyun.com/detail/rongrong_love_lc/9663463

二、CSS设置颜色与背景
*****************************************
1.color
2.background-color
3.background-image
4.background-repeat
5.background-attachment
6.background-position
7.background
*****************************************

1.color：可以定义字体颜色，默认字体颜色
    color.html文件
      <html>
      <head>
              <title>Color例子</title>
                  <link rel="stylesheet" type="text/css" href="color.css"/>
          </head>
          <body>
          <h1> 设置文字颜色</h1>  
          <p>默认字体颜色</p>
          </body>
      </html>

    color.css文件
      body {background-color:red;
            color:green}
      h1 {color:#00ff00}

2.background-color:设置背景颜色
    html文件同上；
    color.css文件如下：
      body {background-color:red;
                color:green}
      h1 {background-color:rgb(0,100,100);
        color:#00ff00}

3.background-image：设置背景图片
    html文件同上；
    color.css文件如下:
      body {background-image:url("image1.jpg");
                color:green}
      h1 {background-color:rgb(0,100,100);
          color:#00ff00}

4.background-repeat:控制图像是否平铺和平铺方式
      value:repeat-x(横向平铺);repeat-y(纵向平铺); repeat(横向和纵向都平铺，默认是这个值);no-repeat(不平铺)
        html文件同上；
        color.css文件如下：
          body {background-image:url("image1.jpg");
                background-repeat:no-repeat;
                color:green}
          h1 {background-color:rgb(0,100,100);
              color:#00ff00}

5.background-attachment:设置固定背景图像
    value:scroll(随着屏幕滚动);fixed(固定)
    html文件同上;
    color.css文件如下:
      body {background-image:url("image1.jpg");
            background-repeat:no-repeat;
            background-attachment:scroll;
            color:green}
      h1 {background-color:rgb(0,100,100);
          color:#00ff00}

6.background-position:设置图像放置的位置
    value:top,bottom,left,right,center(可以组合,以空格为界限);
2cm 2cm(距离左边，顶部距离,可以是cm,也可以是mm[dm,m测试不可以])；
50% 20%(水平和竖值比例)
    html文件同上;
    color.css文件如下：
      body {background-image:url("image1.jpg");
            background-repeat:no-repeat;
            background-attachment:scroll;
            background-position:center top;
            color:green}
      h1 {background-color:rgb(0,100,100);
          color:#00ff00}

  ********************************************

      body {background-image:url("image1.jpg");
            background-repeat:no-repeat;
            background-attachment:scroll;
            background-position:20% 60%;
            color:green}
      h1 {background-color:rgb(0,100,100);
          color:#00ff00}

  ********************************************

      body {background-image:url("image1.jpg");
            background-repeat:no-repeat;
            background-attachment:scroll;
            background-position:20mm 1cm;
            color:green}
      h1 {background-color:rgb(0,100,100);
          color:#00ff00}

7.background:以上属性的缩写
    默认顺序如下:(缺省时使用默认值)
        [background-color] | [background-image] | [background-repeat] | 
    [background-attachment] | [background-position]
    html文件同上:
    color.css文件如下：
      body {background:red url("image1.jpg") no-repeat fixed center}
      h1 {background-color:rgb(0,100,100);
          color:#00ff00}