目标

• 理解
  • 背景的作用
  • 了解CSS背景图片和插入图片的区别
  • 熟练掌握background中的属性
• 应用
  • 通过css背景属性，给页面添加背景样式
  • 设置不同的背景图片位置
  • 通过平铺设置不同的图片特殊属性

1.0 背景颜色（color）

• 关键单词（color）
• 其语法

  background-color:颜色值;   默认的值是 transparent  透明的

1.1 背景图片（image）

• 关键字 imange 图片

• 其语法

  background-image : none | url (url)

  | 参数

  | 作用

  | | —- | —- | | none

  | 无背景图（默认的）

  | | url

  | 使用绝对或相对地址指定背景图像

  |

background-image : url(images/demo.png);

• 小技巧： 我们提倡 背景图片后面的地址，url不要加引号。

1.2 背景平铺（repeat）

• 语法

  background-repeat : repeat | no-repeat | repeat-x | repeat-y

  | 参数

  | 作用

  | | —- | —- | | repeat

  | 背景图像在纵向和横向上平铺（默认的）

  | | no-repeat

  | 背景图像不平铺

  | | repeat-x

  | 背景图像在横向上平铺

  | | repeat-y

  | 背景图像在纵向平铺

  |

1.3 背景位置（position）重点

• 概念
  • 设置背景位置其属性是方向名词
• 语法

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

  | 参数 | 值 | | —- | —- | | length | 百分数 | 由浮点数字和单位标识符组成的长度值 | | position | top | center | bottom | left | center | right 方位名词 |

• 注意
  • 使用设置背景位置的前提是先指定image属性
  • position后面是x坐标和y坐标，可以使用方位名词或者精确的单位
  • 如果指定两个值，两个值都是方位名称，则两个值厚顺序无关，
  • 如果指定了一个方向名词，另外一个值默认居中对齐
  • 如果是精确的坐标，那么x轴和y轴都是
  • 如果指定一个数值，那么该数值一定是x坐标，另一个默认是垂直居中
  • 在实际开发中使用最多的就是背景图片居中对齐

1.4 背景固定

• 背景是滚动的还是固定的
• 语法

  background-attachment : scroll | fixed

  | 参数 | 作用 | | —- | —- | | scroll | 背景图像是随对象内容滚动 | | fixed | 背景图像固定 |

1.5 简写

• background：属性的值是没有固定书写顺序
• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;

  background: transparent url(image.jpg) repeat-y  scroll center top ;

1.6 透明背景

• 语法：

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

• 最后一个参数是alpha 透明度 取值范围 0~1之间

• 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响
• 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。

1.7 背景总结

2.0 行高 (line-height)

目标

• 理解
  • 能说出 行高 和 高度 三种关系
  • 能简单理解为什么行高等于高度单行文字会垂直居中
• 应用
  • 使用行高实现单行文字垂直居中
  • 能会测量行高

行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。

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

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

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

行高和高度的三种关系

• 如果 行高 等 高度 文字会 垂直居中
• 如果行高 大于 高度 文字会 偏下
• 如果行高小于高度 文字会 偏上