2020-11-14 css实例：CSS Sprites精灵图实例及样式解释

最新推荐文章于 2022-03-08 15:17:05 发布

Amanda&Rachel

最新推荐文章于 2022-03-08 15:17:05 发布

阅读量323

点赞数 1

分类专栏： css学习总结文章标签： css css3

本文链接：https://blog.csdn.net/m0_51907938/article/details/109698734

版权

本文介绍了CSS Sprites精灵图的概念，展示了精灵图的外观，并通过实例解析了如何使用CSS设置背景定位来显示特定的小图标。通过这种方法，可以优化网页加载速度，提高性能。

摘要由CSDN通过智能技术生成

CSS Sprites精灵图

精灵图长啥样？

在这里插入图片描述

我们经常看到的很多小图标共同组成了这张大的的背景图。这样的背景图我们称之为精灵图。

CSS Sprites精灵图实例

<!DOCTYPE html>			/*本例为给li中文字前添加背景图标*/
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul li{
    			/*每一行内容的大盒子样式*/
				list-style: none;	/*去掉li的项目符号*/
				line-height: 60px