css背景（图片，位置，背景附着，平铺）

一、行高

1.1、行高测量

基线与基线的距离为行高

1.2、单行文本垂直居中

文字的行高等于盒子的高度

  line-height:30px;

行高= 上距离 + 内容高度 + 下距离

盒子 ：
上距离和下距离总是相等的，因此文字看上去是垂直居中的

行高与高度的关系：

• 行高=高度，文字会垂直居中
• 行高>高度，文字会垂直偏下
• 行高<高度，文字会垂直偏上

二、css背景（background）

2.1 背景颜色（color）

语法：

 background-color:  transparent|color; 

注意
transparent：背景色透明，不写颜色默认为transparent
color：指特定颜色

2.2 背景图片（image）

语法：

/* 背景图片必须加url，url里面的地址不要加引号 */
 background-image: none | url(url);

例：
background-image: url(3.jpg);

2.3 背景平铺（repeat）

语法：

    /* 默认平铺 */
    background-repeat: repeat;
    /* 背景图片不平铺 */
    background-repeat: no-repeat;
    /* 水平平铺 */
    background-repeat: repeat-x;
    /* 纵向平铺 */
    background-repeat: repeat-y;

2.4 背景位置(position)重点

语法：

        background-position: length || length;
        background-position: position || position;

注意

• 必须先指定background-image属性

• position后面是x坐标和y坐标。可以使用方位名词或者精确单位

• 如果只指定了一个方位名词，另一个值默认居中，为50%

• 如果只指定了一个数值，那该数值用于x坐标，另一个默认是y坐标，默认居中

• 如果指定两个值，两个值都是方位名词，则两个值前后顺序无关，比如left,top和top,left效果一致

• 如果指定两个值，精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

   例：
   /* 这种写法一般是我们以后超大图的写法 */
       background-position: center top;
       background-repeat: no-repeat;
  

2.5 背景附着

• 背景附着就是解释背景是滚动的还是固定的

• 语法

        background-attachment: scroll | fixed;
  

2.6 背景简写

• background：属性的值的书写顺序官方并没有强制标准的。
• background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置；

语法：

/* background：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置； */
        background: #ccc url(images/l.png) no-repeat fixed center top ;

2.7 背景透明（css3）

语法：

background：rgba(0,0,0,0.3);

• 最后一个参数是alpha透明度 取值范围0-1之间
• 习惯把0.3的0省略掉，写成background（0,0，0，.3）；
• 注意：背景半透明是盒子背景半透明，盒子里面的内容不受影响

2.8 背景总结