background-image的用法

         background-image将图片作为背景，配合使用的属性background-repeat、background-position、还有css3才有的background-size，下面通过几个图片来展示这几个结合使用实现图片作为背景（如搜索框中的一个搜索图片）

       1、background-image的用法，为图像制定url：

      2、background-repeat：有方向的额重复

           主要有几个属性：repeat，默认。背景图像将在垂直方向和水平方向重复；repeat-x；repeat-y；no-repeat；

      3、background-position背景定位

           有三种方法：百分数（50%、50%代表中心位置）、像素值（10px、20px代表左上角向下10px，向右20px）、和直接指定位置  （center、top、bottom、left、right）

上面三种属性共同使用的代码：

在上面的三个属性配合使用后，产生新的需求，能不能将图片拉伸、放大或者缩小来满足背景页面需要呢？查到有background-size方法，该方法css3才具有

      4、background-size有两个值，背景图的width和height，可以用像素（px）、百分比（%）或是auto，还可以是cover和contain。

cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同

contain：保持图像的宽高比例，将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含。

用像素：background-size:150px 80px;

 百分比：background-size:40% 60%;不过需要注意的是，图片大小不是按背景图片大小的百分数来计算的，而是装载背景图的元素的百分比来计算。