理论：获取图像一次，然后移动它并且只显示它的一部分。这减少了必须获取多个图像的开销。
优点：跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
缺点：
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
<style>
#sprites{
width: 51px;
height: 59px;
background-position: -2px -2px;
background:url(images/sprites1.png)no-repeat;
}
.max1{
background: url(images/sprites1.png) no-repeat -330px -68px;
width: 61px;
height: 54px;
transform:scale(0.5) /* 缩小图片大小，缩小一半 */
}
</style>
</head>
<body>
<div class="max" id="sprites"></div>
<div class="max1"></div>
</body>1、首先我们需要一张合集的多图，比如我们一般网站上用到的，logo小图标等
2、在使用的时候需要给该图片设置宽与高
3、然后使用background-position属性的x,y来找到图片
4、设置图像大小可以用transform:scale( x )来控制图标大小
这个情况中找xy的坐标其实是一件很麻烦的事情，推荐一款工具，可以很好的找到坐标css精灵
本文来源：重庆seo博客
本文地址：https://focusonseo.cn/css/56.html
文章声明：以上内容(如有图片或视频亦包括在内)除非注明，否则均为重庆seo博客原创文章，转载或复制请以超链接形式并注明出处。
相关文章
上一篇：鼠标移动到div上变为可点击状态