（16）css背景属性常用应用场景

场景一：替换插入图

<h1> 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片（企业网站）、最大的标题（新闻网）等。 另外 <h1> 内部的文字，可以帮助提高 SEO 搜索排名。 在设置logo图片时，如果使用插入图，就不能书写搜索关键字。

背景图替换插入图方法

如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给 <a> 标签或 <h1> 标签。

那么如何解决文字隐藏不显示的问题呢？

方法一、

①将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题。

当使用IE7版本以下浏览器运行时，会出现该问题，会显示文字的1px左右出来。所以这种写法并不是最好的。

方法二、

②可以设置给 <a> 标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏。该方法所有浏览器版本都兼容，是最好的方式。

 场景二：padding 区域背景图

制作方法

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载， 背景区域应该使用 padding 挤出位置。 四个方向的 padding 都可能用于添加背景图。 例如 padding-left 区域背景： 

场景三：精灵图技术

1.精灵图介绍

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时， 服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。 为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

2.css精灵介绍

CSS 精灵是一种处理网页背景图像的方式。 它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。 通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

3.css 精灵的技术依据

①将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片。

②利用背景定位技术，将精灵图的每个小图片加载到对应的标签上。

如下是css精灵图的在线制作网站：

CSS Sprite Generator, Editor, and Code

css精灵图制作步骤图

css精灵图使用步骤图

css精灵图使用Fireworks量取精灵图的位置

http://www.spritecow.com/  注：也可以点击使用该网站进行量取图片位置。

 制作精灵图的注意事项

1. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。
2. 精灵图的宽度取决于最宽的那个背景图片的标签宽度。
3. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白， 保证背景图片加载到一个标签内部时，不能出现多余内容。
4. 在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。