替换插入图

<h1> 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片。

另外 <h1> 内部的文字，可以帮助提高 SEO 搜索排名。

如果使用插入图，就不能书写搜索关键字。

<font style="color:#000080;"><a</font> <font style="color:#008080;">href=</font><font style="color:#DD2200;">"#"</font><font style="color:#000080;">><img</font> <font style="color:#008080;">src=</font><font style="color:#DD2200;">"images/logo.png"</font> <font style="color:#008080;">alt=</font><font style="color:#DD2200;">""</font> <font style="color:#000080;">/></a></font>

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

<font style="color:#000080;"><a</font> <font style="color:#008080;">href=</font><font style="color:#DD2200;">"#"</font><font style="color:#000080;">></font>淘宝网|购物|六一<font style="color:#000080;"></a></font> 

text‐indent: ‐100em;

overflow: hidden;

padding 区域背景图

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载

背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

padding-­left 区域背景：

.news li {

<font style="color:#A61717;background-color:#FFADAD;">padding‐</font>left: **25px**; 
background: <font style="color:#DD1144;">url(images/s2.png)</font> no<font style="color:#A61717;background-color:#FFADAD;">‐</font><font style="color:#0086B3;">repeat</font> <font style="color:#0086B3;">left</font> <font style="color:#0086B3;">center</font>; 

}

精灵图技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

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

通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。

技术依据：

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

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

制作精灵图的注意事项：

a. 精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放。

b. 精灵图的宽度取决于最宽的那个背景图片的标签宽度。

c. 精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载时不能出现多余内容。

d. 在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图。

二倍精灵图做法

·在firework里面把精灵图等比例缩放为原来的一半

·之后根据新的大小测量坐标

·注意代码里面 background-size也要写：精灵图原来总体宽度的一半