html中精灵图的使用方法,科技常识：css sprites（精灵图）如何使用

今天小编跟大家讲解下有关css sprites(精灵图)如何使用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css sprites(精灵图)如何使用 的相关资料，希望小伙伴们看了有所帮助。

css Sprites是一种性能优化技术 一种网页图片应用处理方式：将多个图像组合成单个图像文件以在网站上使用的方法 以提高性能；也被称为css 精灵图。

网页通常包含多个图像。这些包括图标 按钮 徽标 相关图片和其他图形。当页面中加载图像时 浏览器向服务器发出HTTP请求。分别加载每个图像需要多次调用HTTP服务器 这可能导致下载时间变慢以及带宽使用率过高。

css Sprites会将多个图像组合成一个称为精灵表或拼贴图的单个图像 用户不下载多个文件 而是下载单个文件并通过偏移文件显示必要的图像(或精灵图)。

这样可以减少对服务器的调用、减少呈现网页所需的下载次数 节省带宽并缩短用户端的下载时间 减少网络拥塞。

如何使用css Sprites(精灵图)

因为css Sprites是一张多个图像组合成单个图像 在精灵表中多个图像会被放置在网格状图案里 呈现网状分布。

当需要特定图像(精灵图)时 可以通过css background背景定位技术技巧布局网页背景。在需要用到图片的时候 现阶段是通过css属性background-image组合background-repeat, background-position等来实现图片的显示。

了解了background-position属性的用法 使用精灵图之前 我们需要知道精灵图中各个图标的位置。

从上面的图片不难看出Sprites(精灵图)中各个小图标(icon)在整张Sprites(精灵图)的起始位置 例如第一个图标(裙子)在精灵图的起始位置为 x：0 y：0 第二个图标(鞋子)在精灵图的起始位置为 x：0 y：50px 第三个图标(足球)在精灵图的起始位置为x：0 y：100px 依次类推可以得出各个图片相对于精灵图的起始位置。

以上面的Sprites(精灵图)为例(实际精灵图中各个小图片的起始位置和上面的展示图不同)用一个Demo来阐述它的使用方法。

html

css

.box {

width: 600px;

height:300px;

border: 3px solid #ccc;

background-color: #8064A2;

}

span {

display: inline-block;

width: 25px;

height: 25px;

border: 3px solid #ccc;

background-image: url(css/img/sidebar.png);

background-repeat: no-repeat;

margin: 5px;

}

.icon1 {

background-position: 0 0;

}

.icon2 {

background-position: -40px 0;

}

.icon3 {

background-position: 0 -25px;

}

.icon4 {

background-position: -40px -25px;

}

效果图：

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。