CSS背景样式

CSS的背景

通过CSS背景属性可以给页面添加背景元素样式。背景属性可以设置背景元素的颜色，背景图片，背景平铺，背景图片位置以及背景图像固定

1.背景颜色

背景颜色用background-color表示
如果没有background-color默认为 transparent（透明色）

表示如下：

  <style>
      div {
          background-color: red;
          width: 200px;
          height: 200px;
          background-color: transparent;
      }
  </style>

运行效果如下：

背景颜色

2.背景图片

背景图片常见于logo，装饰性图片或者超大的背景图片也是用 background-image来做
优点主要是可以控制图片位置
背景图片语法格式用background-image: url()，后面跟的也可以是none（这个是默认的）；

表示如下：

   <style>
  div {
      /* background-color: red; */
      width: 500px;
      height: 500px;
      background-color: transparent;
      background-image: url(wuhan.jpg);
  }
  </style>

执行后：

背景图片

这时候会发现背景铺满了整个盒子，会根据本来大小铺满，这就是默认的平铺的效果。

3.背景平铺

在上一个案例中，图片本来优点小，设定盒子大小在500*500大小，那么就会复制很多个直到把盒子填满，这就是背景平铺。

如果让一个HTML页面背景平铺，其书写格式为：
```
   background-repeat:
```

取值一共有4个，repeat（平铺）、norepeat（不平铺）、repeat-x/-y（沿着X轴或者Y轴平铺）
-书写案例如下：

<style>
  div {
      /* background-color: red; */
      width: 500px;
      height: 500px;
      background-color: transparent;
      background-image: url(wuhan.jpg);
      background-repeat: repeat;
      background-repeat: no-repeat;
      background-repeat: repeat-x;
      background-repeat: repeat-y;
  }    
</style>