Background背景

   Background背景

  说到背景我们并不陌生，那么对于背景到底又有哪几种属性呢？背景作为我们经常会用到的属性之一，很大的原因在于它能够为我们支持为元素添加背景颜色和背景图片两个方面的功能。接下来我来介绍一下一下背景相关的属性，并且展示给大家。

1. background-color：背景色

这就是我们经常会碰到的background-color：背景色，它可以设置指定的元素背景色。

1. background-images：背景图片

   背景图片的获取和背景色设置的方式不同，一个是要获取到指定的图片地址、另一个是直接设置颜色的属性值。还有就是值得我们去注意一下，如果同时给一个元素设置背景颜色（background-color：）和背景图片（background-image:），那么背景颜色就会被背景图片覆盖掉。如下图：

  背景图片background-image：该属性需要使用url（）函数来指定图片地址，图片的地址既可以是相对的，也可以是绝对的。

1. background-repeat：属性

该属性用于设置对象的背景图片是否重复显示，在之前必须指定背景图片（background-image）。

  相对比之前的图片你会发现背景图片里面的公仔变成一个了，这是因为什么呢？这是因为我给它添加了no-repeat；（不重复显示）属性值、之前是因为图片太小才导致图片重复显示，现在可以设置重复的方向如repeat；（纵横同时重复），repeat-x（x轴方向重复），repeat-y（y轴方向重复）加不重复一共四个属性值。

1. background-position：属性

  这个属性一般是用于控制背景图片的位置；如下图

        它的属性值可以为关键字，一个关键字或者两个关键字配合使用，还是就是也可以通过百分比来定位，第一个百分比是以左上角我原点来对应横坐标进行定位，第二个百分比则是对应纵坐标。

1. background：这是一个复合属性可以同时设置背景颜色、背景图片、背景重复、背景位置等，它的属性值可以是上面属性值拼接起来。