雪碧图的应用
小周末，研究了一下雪碧图的实现方式。先科普一下雪碧图，雪碧图就是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中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++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
實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中，需要實現一種交互效果：點擊某張圖片，使其周圍的...
網頁批註如何實現Y軸位置的自適應佈局？
Apr 04, 2025 pm 11:30 PM
網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能，特別是如何處理批註之間的間�...
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操作。
