背景图的应用 | 零基础学HTML（二十一）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情

• 背景图替换插入图方法：如果想解决SEO问题，可以将HTML结构中，插入图换成搜索关键字，然后使用css添加背景图给<a>标签或<h1>标签。这样可以又提高SEO排名还可以用图片来展示内容，主要是用于h1标签
• 文字隐藏的方法：
  • 设置文字字号为0。但是IE8以上或高版本浏览器可以隐藏文字，IE7及以下有兼容问题
  • 设置给<a>标签一个text-indent属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏
• padding区域背景图：
  • 制作方法：在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用padding挤出位置。四个方向的padding都可能用于添加背景图
• 精灵图技术

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

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

  • css精灵的技术依据：将网页中需要用到的小尺寸背景图制作成一张背景透明的png图片；然后利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

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

  • 可以用一些在线网站等工具生成精灵图