1. 控制图像大小

  1. 可以利用 width 和 height 属性来控制图像的大小。
  2. 相较于使用 <img> 标签的属性来控制图像大小，使用 CSS 控制的好处是可以提前预留足够的空间，页面的其他部分不需要等待图像加载完毕即可显示出来。

2. 图像对齐

  1. 可以使用 float 属性来对图像进行对齐。

3. 图像居中

  1. 默认情况下，图像元素是内联元素，这意味着它们与周围的文本一起流动。
  2. 为了让图像居中，应该首先将图像转换成块级元素，即 display: block。
  3. 转换成块级元素后，可以使用 text-align 或者 margin-left: auto; margin-right:auto 的方式来居中。

4. 背景图像

  1. background-image 属性允许在任何 HTML 元素之后放置图像。
  2. 背景图像可以填满整个页面或者是填充页面的一部分，默认情况下，背景图像会自动重复并充满整个盒子。
  3. 指向图像的路径放在 url(...) 中。

5. 重复图像

  1. backgroud-repeat 属性可以指定图像的重复方式。
  2. repeat 值表示背景图像在水平方向和垂直方向上重复，这是默认显示方式。
  3. repeat-x 值表示背景图像只在水平方向上重复。
  4. repeat-y 值表示背景图像只在垂直方向上重复。
  5. no-repeat 表示背景图像不重复，只显示一次。
  6. background-attachment 属性用于指定背景图像在用户滚动页面时的移动方式。
  7. fixed 表示背景图像固定在页面中的一个位置。
  8. scroll 表示背景图像随着用户上下滚动。

6. 背景图像定位

  1. 如果背景图像不进行重复，可以使用 background-position 属性来指定背景图像在浏览器窗口中的位置。
  2. 该属性通常有两个值，第一个值表示水平位置：left、right、center，第二个值表示垂直位置：top、bottom、center。
  3. 如果只指定一个值，那么第二个值默认为 center。
  4. 还可以使用一对像素值或者百分数，用来表示与浏览器窗口左上角的距离

7. 简写

  1. 也可以使用 background 属性进行简写，顺序为：

    a. background-color

    b. background-image

    c. background-repeat

    d. background-attachment

    e. background-position

8. CSS3：渐变

  1. 通过 background-image 属性可以为盒子指定背景渐变。

9. 小结

  1. 可以使用 CSS 来指定图像的大小。
  2. 可以利用 CSS 来在水平和垂直方向上对齐图像。
  3. 对于页面上由任何元素创建的盒子，可以指定背景图像。
  4. 背景图像可以只出现一次，也可以在盒子的背景中重复出现。
  5. 可以通过移动背景图像的位置来创建图像翻转效果。