您的位置：首页 > Web前端 > CSS

CSS Sprite图

2016-07-22 17:25 507 查看

CSS Sprite图已经成为网站性能优化中必用的一个技巧了，我在这里总结一下CSS Sprite的用法。如有错误，欢迎指正。

CSS Sprite优点

减少http请求数，加快页面加载速度
(因网页上的每一个图都会创建一个http请求)

CSS Sprite使用场景

页面上使用多个静态小图，而font icon又无法满足要求。

CSS Sprite缺点

1、动态获取的图片不适合使用CSS Sprite
2、需要repeat的图片不适合使用CSS Sprite
3、图片太大也不适合使用CSS Sprite

CSS Sprite用到的知识

CSS方面：主要用到background属性，尤其是background-image、background-repeat、background-position
HTML方面：主要用到显示图片大小的块级标签

CSS Sprite的实现代码

用一个简单的例子实现一个CSS Sprite，代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 133px;
height: 40px;
margin:100px auto;
border:1px solid #ccc;
background-image: url(./sprite.png);
background-repeat: no-repeat;
background-position: -17px 0;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

实现的效果如下：

图解CSS Sprite的实现

下面，我用图说明CSS Sprtie的实现过程

css sprite素材

我们利用的是google网站的一副css sprite图，素材如下：

html页面

html中显示图片的div标签就相当于一个窗口，通过这个窗口来展示将要显示的图片；

未设置background-position时的页面

（半透明图都是为了说明CSS Sprite而后期添加的，非页面本身展示效果）

设置background-position后的页面

css中的background-image为整张css sprite图；background-repeat均取no-repeat;

起关键作用的就是background-position：它指出了从css sprite图中的那个位置开始展示sprite图

（半透明图都是为了说明CSS Sprite而后期添加的，非页面本身展示效果）

总结

CSS Sprite的实现需要CSS和html两者配合：
1、html负责用一个块级标签定义 展示sprite图中一个小图的"窗口"的宽和高;
2、css的background-position负责指出 展示的sprite图某个小图的起始位置(即该小图左上角的坐标)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航