CSS雪碧图的一个小案列

浏览数：108 / 时间：2015年06月09日

以前只是听说过雪碧图没用过，然后来了这里做的第一个活儿就涉及到他。因为怕不会用，就用他们原来切的，那个调的费事啊，算那个background-position困难的啊。原因是他们的雪碧图切放在了一起，没有留有空隙，所以，只能用一个废标签去专门放一个图标。现在发现雪碧图还是很有用的，把所有要用的图片放在一起，然后根据定位来调出要用的图片很方便。
技术分享

随便写了个小demo：http://codepen.io/tianzi77/pen/xGGMBO
参照网站底部鼠标放上去的时候有一个切换效果。
代码也很简单：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
    span{
        width: 90px;
        height: 38px;
        display: block;
        background: url(https://static.yijiedai.com/Images/Common/footer2.png) no-repeat 0 0;
    }
    span:hover{
        background: url(https://static.yijiedai.com/Images/Common/footer2.png) no-repeat 0 -38px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <span></span>
</body>
</html>

css雪碧图重要是定位：left top问题。
按照这个顺序对图标进行对位是关键。
实用技巧：

不要等到你完成切片之后才开始sprite

如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。

把图片放到它要显示的地方的相对的地方

这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

定位时避免使用bottom或right等

当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

给每个图片足够的空间

就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。

不用担心Sprite图片的像素大小

如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。国外某购物网站上使用的Sprite图片有1,000px×2,000 px那么大，但是图片的大小仅仅16.7kb!

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

CSS雪碧图的一个小案列