浅谈CSS Sprite和实例解析

最新推荐文章于 2021-09-13 10:36:40 发布

前端蜗牛

最新推荐文章于 2021-09-13 10:36:40 发布

阅读量4.8k

点赞数 1

分类专栏：前端攻略文章标签： css 网页设计 html sprite 前端

本文链接：https://blog.csdn.net/u011349149/article/details/24181675

版权

前端攻略专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、什么是CSS Sprite？

解析Yahoo的页面制作，不难发现，其将图标、背景、按钮背景等图片合并成一张图，然后通过坐标来定位背景。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

二、CSS Sprite的优缺点？

1、优点：

1）其最大的优点便是可以很好地减少网页的http请求，从而提高页面的性能。

2）减少图片的大小，从而减少所在内存空间

3）易于风格更换。只需改变少张图片样式或者颜色，就可以改变整个网页风格。

4）减少图片命名，只需对一张整体的图片命名即可。从而减少网页设计的时间。

2、缺点：

1）引入不必要的背景，并不是所有图片都是背景。有些传达重要信息的图片应该写入HTML页面中

2）开发麻烦，需要测量工具定位每个背景的坐标位置，较为繁琐。

3）维护复杂，如果要更改的图片与原图片大小差别较大，那么就需要调整其他背景图片的位置，增加繁琐度。

3、总结

CSS Sprite很有用处，但是滥用CSS Sprite就会照成效率地降低。可以将内容较为固定，基本改变不大的图片放入一个sprite中。其他的分情况归类，组成不同的sprite。而对于那些经常变动的设计，CSS Sprite还是较为费时间的。

三、CSS Sprite实例--小试牛刀

集合图如下：

代码如下：

1）html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css sprite</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>

css:

@charset "utf-8";
/* CSS Document */

.one
{

background-image:url("images/ic.jpg");
background-repeat: no-repeat;
background-position:-309px -202px;
width:57px;
height:58px;
margin:0 auto;
}
.two
{

background-image:url("images/ic.jpg");
background-repeat: no-repeat;
background-position:-82px -399px;
width:57px;
height:58px;
margin-left:684px;
}
.three
{

background-image:url("images/ic.jpg");
background-repeat: no-repeat;
background-position:-233px -269px;
width:57px;
height:58px;
margin-left:684px;
}