CSS Sprite 雪碧图，简单来说就是：为了提高网页的性能，减少加载次数，将一些不会经常随网站内容变化的小图标，集中放在一张大图上，将该图应作为background-image 嵌入页面中，在需要相关图标时，根据background-position设置坐标值，达到目的。 ...
CSS Sprite 雪碧图，简单来说就是：
为了提高网页的性能，减少加载次数，将一些不会经常随网站内容变化的小图标，集中放在一张大图上，将该图应作为background-image 嵌入页面中，在需要相关图标时，根据background-position设置坐标值，达到目的。
一个例子，可以复制然后看一下效果：
HTML代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>sprite</title> <link rel="stylesheet" href="css-sprite.css"></head><body><div class="container"> <ul class="menu"> <li class="cat-1"> <i></i> <h3><a href="#">项目一</a></h3> </li> <li class="cat-2"> <i > </i> <h3><a href="#">项目二</a></h3> </li> <li class="cat-3"> <i></i> <h3><a href="#">项目三</a></h3> </li> <li class="cat-4"> <i></i> <h3><a href="#">项目四</a></h3> </li> <li class="cat-5"> <i></i> <h3><a href="#">项目五</a></h3> </li> <li class="cat-6"> <i></i> <h3><a href="#">项目六</a></h3> </li> <li class="cat-7"> <i></i> <h3><a href="#">项目七</a></h3> </li> <li class="cat-8"> <i></i> <h3><a href="#">项目八</a></h3> </li> <li class="cat-9"> <i></i> <h3><a href="#">项目九</a></h3> </li> <li class="cat-10" > <i></i> <h3><a href="#">项目十</a></h3> </li> </ul></div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：CSS Sprite 雪碧图制作
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
