css学习之background

首先，这篇文章主要讲的是一种特殊的加入图片的方法，例如下图

两个文字左侧的小png图标

如果我们对这两个图标右击鼠标，会发现这不是一个图片，或者说，这个图片你无法直接另存为，因此这个图标实际上是小段文字的背景图片，如果你移动了这个标签，那么这个图片便会跟着移动，十分方便，尤其加载这种小图标，一般都是用的background。

那么，怎么用呢？需要注意哪些问题？

其实很简单，一行代码解决

background:url(images/slide_arrow.png);（注意：文件路径一定要看清楚！）

然而一般不这么用，因为我们不想每个小图标都要有一个单独的路径，毕竟大小很小，却数量很多，因此，我们可以把这些小图片做到一张png里，例如下图：

这个图里有四个图标。

那么取到里面任意一张小图片的方法就是：background-position

不知道这个属性的童鞋可以去w3c里查一查

那么这里取到第二个箭头的具体用法就是：

background-positon:0 -26px;

其中第一个为水平偏移量，第二个为垂直偏移量。

同时记得限制你的图片的大小，同时给background加上no-repeat属性，禁止其重复

完整代码：

background:url(images/slide_arrow.png) no-repeat 0 -26px;