编程大白话之-background (壹)

        写之前也犹豫了很久，写还是不写呢？网上的例子、描述种类何其多，为啥呢？还不是因为它是一复合属性，能说的点比较多呗，我也能上来插几句话，可是写吧又怕自己万一哪里说错了误人子弟，不过想想水的帖子那么多，还缺我这一篇？

        因为该属性较为庞大，所以我决定分为三篇对其进行讲解，基础的属性使用每四项分为一篇，第三篇讲一下一些特殊的使用方法，那么话不多说开撸。

        提笔道来，不对键盘敲起来。background相信大家都不陌生，从你刚接触编程，了解css开始首先接触到的比较大的属性莫过于它了吧。但是往往我们接触最多的却也是常常被大家所忽视的，那么你究竟对这个属性了解多少，会使用多少呢？

        度娘说：background 简写属性在一个声明中设置所有的背景属性。

        某school说：background 简写属性在一个声明中设置所有的背景属性。

        某教程说：background背景缩写属性可以在一个声明中设置所有的背景属性。

        what，描述的都这么专业？ 我说：这就是一设置背景属性的工具。

对于background属性的组成没什么好说的，都是规定死的单词以下列出：

    1.background-color

    2.background-image

    3.background-repeat

    4.background-position

    5.background-attachment

    6.background-size        *css3之后新增

    7.background-origin        *css3之后新增

    8.background-clip            *css3之后新增

    以上排序没有优先顺序，纯属个人喜好，(>< ! 不顺眼来咬我呀)，言归正传谈谈属性的使用

background-color：设置元素背景色颜色

这是我们最长用到的一个属性，书写的方法也有很多种：

    1. background-color:yellow;            用颜色英文单词直接填写(要中文就好了)。左代码右效果

   2. background-color:#333333;            16进制用法，简写为#333，两个字母为一组相同就可以省略

   3. background-color:rgb(255,0,255);        用rgb代码表示

   4. background-color:transparent;        默认值，表示背景颜色为透明。

当我刚接触这个属性的时候，还纳闷开发者那天是想啥呢？弄一个这属性既然不想设背景色那不填背景属性不就好了么？而它却有自己特殊使用情况如：

    一个元素覆盖在另外一个元素之上，而你想显示下面的元素，这时你就需要把上面这个元素的background设置为transparent

   5. background-color:inherit        继承父元素的背景色属性

下图中父级有颜色，div1背景为透明，div2的背景色使用了inherit继承了父级，但两个都有边框

background-image：给元素设置背景图片

    这个属性大大的提高了我们的视觉效果，可以让我们看到的背景不再那么单调无聊了。

1.background-image: url(括号中写图片路径，加不加 “ ” 都是可以）

        此属性可以同时添加多张图片，具体再后面发布的特殊用法时会讲到(记得关注喔！)

2.background-image:inherit        设置背景图片同样有inherit 属性，子级可以通过这个继承父级背景

3.background-image: none(默认值)  这个值设置后不显示背景图片

        如果url()模式声明的路径不对，或者某种原因图片不能显示，浏览器会把这一不显示的图片自动设置成none;这个属性会配合其它属性有特殊效果，后续将特殊用法时会说到(记得关注喔~)

background-repeat：元素背景图片的平铺方式

        1、background-repeat：repeat表示横向纵向上均平铺;(该属性为默认值)

 如果图片的尺寸不足以铺满背景区域时，背景图片在水平和垂直方向上是会重复出现。以填满元素的背景。

         2、background-repeat：no-repeat   表示横向纵向都不平铺;(如果不设置图片大小，会以实际大小在背景中展示)

        3、background-repeat：repeat-x    表示横向平铺，纵向不平铺

        4、background-repeat：repeat-y    表示纵向平铺, 横向不平铺

        5、background-repeat：round        背景图像自动缩放直到适应且填充满整个背景(图片两端对齐，会适当拉伸背景图导致失真)。round平铺图像的方式与repeat一样，不过背景图不会被裁剪，而是被缩放。并排着一列列显示，请和上面repeat截图做比较，元素的背景大小是一样的，但平铺方式后效果不同。

        6、background-repeat：space     背景图像以相同的间距平铺且填充满整个容器或某个方向(图片两端平铺，保持背景图原始尺寸，图片会自判断背景中能容下几个图片的大小，从而进行平铺)

background-position：背景图片的定位(确定图片的起始位置，从这个位置开始平铺)

    该属性的值有两个：一个是水平方向，一个是垂直方向，但取值的方法有三种

    1.方向关键字    （如果传一个参数，第二个参数默认为center，默认值为0%，0%）

    left top(默认)，left center，left bottom，

    right top，right center，right bottom

    center top，center center，center bottom

传两截图大家对比看一下，上图为默认左上，下图为设置的中上，可以看到平铺位置起点不同

 2.百分比        (第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是                             100％100％。如果仅指定了一个值，第二个值默认为50％。 。默认值为：0％0％)

    x%     y%

同样传两张图供大家进行比较，上图为默认起始位置，下图只传了一个参数

3.position值（第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px 0px）        或任何其他 css单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和            positions）

    xpos ypos

同样发两张截图供大家对比看看不同之处

前四个属性的基本用法在这里就结束了，下一篇会发布其它四个属性的基本用法。

希望对初学者或遗忘了使用方法的朋友有所帮助。下篇见~！