雪碧图的应用
小周末，研究了一下雪碧图的实现方式。先科普一下雪碧图，雪碧图就是css sprite的意思，也有叫css精灵。就是呢，将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
1、好处优点：
有效减少网站的http请求数量，加速图片的显示。
2、条件：
- 静态图片，图片不睡用户信息的变化而变化。
- 小图片，容量比较小的（2~3k）。
- 图片加载量比较大的。
注意：大图片不建议用雪碧图咯，图片那么大，拼完之后岂不是拆机无敌大咯，加载就慢了，得不偿失！！！
3、原理：利用 css3的 background-position控制一个层可显示区域范围大小，通过一个窗口，对背景图进行滑动。
简单来说，就是利用这个属性，设置背景图需要显示的起始位置，在通过标签来控制背景图显示的范围。
4、先来了解一下background-position属性吧，
根据图所知：
- 以左上角为（0,0）坐标
- x,y都是负值
综上所诉，所以background-position的取值就是背景图显示的起始坐标，形式就是background-position：0, 0;
5、拼图：拼图可以用ps，或者网上很多在线雪碧图生成工具，可以利用这些去生成雪碧图。
我是用一个在线拼图工具手动拖拉评出来的，有点恶心~~哈哈
其实最好的拼图就是每个图标边距是多少和图标周围的留白留多少都控制好，对css的background-position的坐标写起来有规律的话，好些很多（然而这个是我自己手动拖拉的，位置很没有规律，所以下面的坐标值都是调试过才取值的）
讲完这些了，可以来正题了，html和css代码了，下面代码是模仿生成一个菜单~~~
6、代码：
<span style="color: #008080;"> 1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 2</span> <span style="color: #0000ff;"><span style="color: #800000;">ul </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 3</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-1"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 4</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 5</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>女装/男装/内衣<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 6</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 7</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-2"</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 8</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;"> 9</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>鞋靴/箱包/配件<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">10</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">11</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-3"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">12</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">13</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>童装玩具/孕产/用品<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">14</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">15</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-4"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">16</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">17</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>家电/数码/手机<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">18</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">19</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-5"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">20</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">21</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>美妆/洗护/保健品<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">22</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">23</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-6"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">24</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">25</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>珠宝/眼镜/手表<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">26</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">27</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-7"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">28</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">29</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>运动/户外/乐器<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">30</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">31</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-8"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">32</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">33</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>游戏/动漫/影视<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">34</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">35</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-9"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">36</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">37</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>美食/生鲜/零食<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">38</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">39</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-10"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">40</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">41</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>鲜花/宠物/农资<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">42</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">43</span> <span style="color: #0000ff;"><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cat-11"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">44</span> <span style="color: #0000ff;"><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span> <span style="color: #008080;">45</span> <span style="color: #0000ff;"><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>房产/装修/建材<span style="color: #0000ff;"></span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #008080;">46</span> <span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #008080;">47</span> <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #008080;">48</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制
<span style="color: #008080;"> 1</span> <span style="color: #800000;"> <style type="text/css">
</style></span><span style="color: #008080;"> 2</span> <span style="color: #800000;"> #content</span>{
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 180px</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> #f8f8f8</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #bbb</span>;
<span style="color: #008080;"> 6</span> }
<span style="color: #008080;"> 7</span> <span style="color: #800000;"> h3</span>{
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">10</span> }
<span style="color: #008080;">11</span> <span style="color: #800000;"> ul</span>{
<span style="color: #008080;">12</span> <span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;"> none</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">14</span> }
<span style="color: #008080;">15</span> <span style="color: #800000;"> li h3</span>{
<span style="color: #008080;">16</span> <span style="color: #ff0000;"> font-size</span>:<span style="color: #0000ff;"> 14px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;"> font-weight</span>:<span style="color: #0000ff;"> 400</span>;
<span style="color: #008080;">18</span> }
<span style="color: #008080;">19</span> <span style="color: #800000;"> li</span>{
<span style="color: #008080;">20</span> <span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 3px 10px 0 0</span>;
<span style="color: #008080;">21</span> <span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> block</span>;
<span style="color: #008080;">22</span> <span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 31px</span>;
<span style="color: #008080;">23</span> <span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;"> 31px</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;"> border-bottom</span>:<span style="color: #0000ff;"> 1px solid #dedede</span>;
<span style="color: #008080;">26</span>
<span style="color: #008080;">27</span> }
<span style="color: #008080;">28</span> <span style="color: #800000;"> li i</span>{
<span style="color: #008080;">29</span> <span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> url(sprite.png)</span>;
<span style="color: #008080;">30</span> <span style="color: #ff0000;">display</span>:<span style="color: #0000ff;"> inline</span>;
<span style="color: #008080;">31</span> <span style="color: #ff0000;">width</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;">32</span> <span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 28px</span>;
<span style="color: #008080;">33</span> <span style="color: #ff0000;">float</span>:<span style="color: #0000ff;"> left</span>;
<span style="color: #008080;">34</span> }
<span style="color: #008080;">35</span> <span style="color: #800000;"> .cat-1 i</span>{
<span style="color: #008080;">36</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -7px -5px</span>;
<span style="color: #008080;">37</span> }
<span style="color: #008080;">38</span> <span style="color: #800000;"> .cat-2 i</span>{
<span style="color: #008080;">39</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -2px -35px</span>;
<span style="color: #008080;">40</span> }
<span style="color: #008080;">41</span> <span style="color: #800000;"> .cat-3 i</span>{
<span style="color: #008080;">42</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -7px -65px</span>;
<span style="color: #008080;">43</span> }
<span style="color: #008080;">44</span> <span style="color: #800000;"> .cat-4 i</span>{
<span style="color: #008080;">45</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -7px -105px</span>;
<span style="color: #008080;">46</span> }
<span style="color: #008080;">47</span> <span style="color: #800000;"> .cat-5 i</span>{
<span style="color: #008080;">48</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -7px -129px</span>;
<span style="color: #008080;">49</span> }
<span style="color: #008080;">50</span> <span style="color: #800000;"> .cat-6 i</span>{
<span style="color: #008080;">51</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -7px -151px</span>;
<span style="color: #008080;">52</span> }
<span style="color: #008080;">53</span> <span style="color: #800000;"> .cat-7 i</span>{
<span style="color: #008080;">54</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;">-60px -4px</span>;
<span style="color: #008080;">55</span> }
<span style="color: #008080;">56</span> <span style="color: #800000;"> .cat-8 i</span>{
<span style="color: #008080;">57</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;">-56px -33px</span>;
<span style="color: #008080;">58</span> }
<span style="color: #008080;">59</span> <span style="color: #800000;"> .cat-9 i</span>{
<span style="color: #008080;">60</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -56px -66px</span>;
<span style="color: #008080;">61</span> }
<span style="color: #008080;">62</span> <span style="color: #800000;"> .cat-10 i</span>{
<span style="color: #008080;">63</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;">-60px -103px</span>;
<span style="color: #008080;">64</span> }
<span style="color: #008080;">65</span> <span style="color: #800000;"> .cat-11 i</span>{
<span style="color: #008080;">66</span> <span style="color: #ff0000;"> background-position</span>:<span style="color: #0000ff;"> -51px -128px</span>;
<span style="color: #008080;">67</span> }
<span style="color: #008080;">68</span>
<span style="color: #008080;">69</span> <span style="color: #800000;"> </span>登录后复制
7、效果图如下：
雪碧图的应用就这样了~~有错欢迎指出~~哈哈哈
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
Windows 11 KB5054979中的新功能以及如何解决更新问题
4 周前
By DDD
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
Inzoi：如何申请学校和大学
1 个月前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
在哪里可以找到Atomfall中的站点办公室钥匙
4 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
HTML容易为初学者学习吗？
Apr 07, 2025 am 12:11 AM
HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。
HTML，CSS和JavaScript的角色：核心职责
Apr 08, 2025 pm 07:05 PM
HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
Gitee Pages静态网站部署失败：单个文件404错误如何排查和解决？
Apr 04, 2025 pm 11:54 PM
GiteePages静态网站部署失败：404错误排查与解决在使用Gitee...
HTML中起始标签的示例是什么？
Apr 06, 2025 am 12:04 AM
AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。
如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果？
Apr 05, 2025 am 06:15 AM
实现图片点击后周围图片散开并放大效果许多网页设计中，需要实现一种交互效果：点击某张图片，使其周围的...
HTML，CSS和JavaScript：Web开发人员的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。
如何使用JavaScript区分关闭浏览器标签页和关闭整个浏览器？
Apr 04, 2025 pm 10:21 PM
如何在浏览器上使用JavaScript区分关闭标签页和关闭整个浏览器？在日常使用浏览器的过程中，用户可能会同时�...
