服務(wù)項(xiàng)目:網(wǎng)站建設(shè)、仿站、程序開(kāi)發(fā)、APP開(kāi)發(fā)設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)設(shè)計(jì)、企業(yè)網(wǎng)站設(shè)計(jì)、電子商務(wù)網(wǎng)站開(kāi)發(fā)、網(wǎng)站維護(hù)、網(wǎng)站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
          四川浚浚科技有限公司
          四川浚浚科技有限公司 (開(kāi)發(fā)設(shè)計(jì)官網(wǎng))TEL : 15308000360 / QQ : 38585404
          深入挖掘用戶需求
          成就品質(zhì)用戶體驗(yàn)

          您的位置:首頁(yè) > 技術(shù)經(jīng)驗(yàn) > 前端開(kāi)發(fā) > 正文

          css sprite 技術(shù)解析
          技術(shù)支持服務(wù)電話:15308000360 【7x24提供運(yùn)維服務(wù),解決各類系統(tǒng)/軟硬件疑難技術(shù)問(wèn)題】

            說(shuō)到css sprite技術(shù)第一次接觸還是在百度站長(zhǎng)工具中網(wǎng)站檢測(cè)時(shí)看到到,說(shuō)這個(gè)技術(shù)可以減少網(wǎng)站圖片請(qǐng)求次數(shù),當(dāng)時(shí)還不是很理解,之后了解了一番,明白了其中的原理,故在此給大家分享一下。
            
           CSS Sprites在國(guó)內(nèi)很多人叫css精靈,是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來(lái),當(dāng)訪問(wèn)該頁(yè)面時(shí),載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言,不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的,所以無(wú)需顧忌這個(gè)問(wèn)題。  加速的關(guān)鍵,不是降低重量,而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì),圖片規(guī)格越小越好,重量越小越好,其實(shí)規(guī)格大小無(wú)所謂,計(jì)算機(jī)統(tǒng)一都按byte計(jì)算。客戶端每顯示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求。所以,圖片越多請(qǐng)求次數(shù)越多,造成延遲的可能性也就越大。

           CSS Sprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進(jìn)行背景定位,background-position可以用數(shù)字能精確的定位出背景圖片的位置。
          下面我就詳細(xì)的講解下他的使用技巧,包你現(xiàn)在不懂的童鞋會(huì)有個(gè)清楚的全新了解,雖然目前有這樣的工具,但是還是要先清楚他的原理,技巧性的來(lái)做也會(huì)很快速的完成定位,下面我分享加個(gè)案例。

          首先跟大家說(shuō)明一點(diǎn),由于需要定位的背景都是合并在一張圖的,所以都是一刀切的,要么是X軸坐標(biāo)一致要么是Y軸坐標(biāo)一致,也就有了我下面要講述的2種類型了。

          1。橫向定位坐標(biāo)
          橫向定位坐標(biāo)意思就是Y軸坐標(biāo)固定,它的特點(diǎn)就是每個(gè)圖標(biāo)的高度是一致的,通過(guò)改變x坐標(biāo)的位置來(lái)改變背景。只需測(cè)量每個(gè)圖標(biāo)的寬度就可以知道x軸的坐標(biāo)了。如果你還不知道這個(gè)規(guī)律,下面我就講解給你聽(tīng)吧,下面拿我做的2個(gè)案例來(lái)說(shuō)事。
          效果圖:

          \

          實(shí)際背景圖:
          \

          那么具體來(lái)講解怎么來(lái)定位,這里是改變X坐標(biāo)來(lái)定位。

          由于高度都是一樣所以Y軸上的坐標(biāo)都是0或top
          這里每個(gè)圖標(biāo)我是用一個(gè)span做背景的,下面具體分析下代碼:
          下面是Css  code:

          .sharelogo{display:inline-block;*display:inline;*zoom:1;height:46px;background-image:url(../images/shareIcon.jpg);background-repeat:none;}
          .facebookLogo{background-position:0 0;width:20px;}
          .pinterestLogo{background-position:-20px 0;width:42px;}
          .twitterLogo{background-position:-62px 0;width:30px;}/**/
          .flickrLogo{background-position:-92px 0;width:130px;}
          .youtubeLogo{background-position:-222px 0;width:98px}
          .blogLogo{background-position:-320px 0;width:84px;}
          .sl{float:left;padding-right:10px;}

          他們的背景圖片都是公用這一張背景:background-image:url(../images/shareIcon.jpg);
          每個(gè)元素的背景都不允許重復(fù):即:background-repeat:no-repeat;
          讀到這里你有發(fā)現(xiàn)一個(gè)規(guī)律,就是每個(gè)元素的坐標(biāo)等于前面元素的坐標(biāo)值加上寬度。即元素的橫向坐標(biāo)值公式等于。相鄰元素的坐標(biāo)值加上寬度。
          pinterestLogo 的值等于facebookLogo的坐標(biāo)值20px+facebookLogo的寬度20px ;是不是很簡(jiǎn)單啊,只要你知道元素的寬度就可以,因?yàn)闄M向坐標(biāo)等必須要給個(gè)固定的寬度,所以這一步測(cè)量寬度不是浪費(fèi)時(shí)間。希望仔細(xì)看源碼中坐標(biāo)值的規(guī)律。
          不管是橫向定位與縱向定位坐標(biāo)的時(shí)候,他們的起始位置都是background-position:0  0;而橫向定位的時(shí)候高度是固定的,所以每次只需改變X坐標(biāo)的值就實(shí)現(xiàn)了。
          比如facebook的logo是起始位置的圖標(biāo),所以它的坐標(biāo)值是0,0,就實(shí)現(xiàn)了它的定位。
          那么pinterest的logo是它的下面一個(gè),就是從facebook的寬度負(fù)值算起。由于facebook的寬度是21px;所以pinterest的logo坐標(biāo)就是background-position:-20px 0; 下面以此類推twitterLogo 是pinterstLogo的下面一個(gè),那么就是用pinterstLogo的坐標(biāo)值加上pinterstlogo的寬度,就得到了twitterLogo的坐標(biāo)位置了。就是-(20px+42px)=-62px;即twitterLogo 的坐標(biāo)為.twitterLogo{background-position:-62px 0;width:30px;}讀到這里你有發(fā)現(xiàn)一個(gè)規(guī)律,就是每個(gè)相鄰元素的坐標(biāo)等于前面元素的坐標(biāo)值加上它前面元素的寬度。即元素的橫向坐標(biāo)值公司等于。相鄰元素的坐標(biāo)值加上它的寬度。好了下面講第二種方案了。

          \
          實(shí)際背景圖片:

          \

          ul{margin:0;padding:0;float:left;width:32px;}
          ul li{float:left;list-style-type:none;width:32px;background-image:url(image/bg.jpg);background-repeat:none;margin:10px 0;}
          .f{background-position:0 0;height:32px;}.p{background-position:0 -32px;height:20px}/*Y軸坐標(biāo)等于起始位置的高度 即:-(0+32)*/
          .fr{background-position:0 -52px;height:32px;}/*等于前面元素的Y軸坐標(biāo)加上前面元素的高度,即:-(32+20) */
          .h{background-position:0 -84px;height:32px;}/*等于前面元素的Y軸坐標(biāo)加上前面元素的高度*即:-(52+32)*/
          .t{background-position:0 -116px;height:32px;}/*等于前面元素的Y軸坐標(biāo)加上前面元素的高度,即:-(84+32)*/


          3.寬度和高度都相等的時(shí)候,那是最好不過(guò)了,直接做乘法,相信你的數(shù)學(xué)能力一家過(guò)了小學(xué)3年級(jí)了,Ok,還是來(lái)分享下吧。

          1.寬度高度想等的情況下等位X軸坐標(biāo),這種情況通常都出現(xiàn)在一組按鈕下,鼠標(biāo)滑過(guò)和點(diǎn)擊時(shí)候的背景改變。這種情況我也總結(jié)出來(lái)了,有公式:X軸坐標(biāo)=-n(起始位置+寬度).其中n值從0開(kāi)始。即所有的起始位置的坐標(biāo)都是0,0開(kāi)始起。下面依次類推。

          比如你現(xiàn)在所要定位的元素是第3個(gè),假設(shè)我們這里的圖標(biāo)的寬度為30px.那么他的X軸坐標(biāo)就等于。x=-3*(0+30px);Y軸的坐標(biāo)=-n(起始位置+高度)

          比如你現(xiàn)在所要定位的圖標(biāo)為第6個(gè)位置,假設(shè)這里的高度也是32px;那么他的Y軸坐標(biāo)就是Y=-6(0+32px)=-192px.  

          到此,大家應(yīng)該也明白CSS Sprite是一項(xiàng)什么技術(shù),以及如何運(yùn)用了。
          最后送一點(diǎn)福利給大家, CSS 圖片拼合生成器

          CSS 圖片拼合生成器(英文名為css sprite generator),是一款支持多語(yǔ)言的免費(fèi)CSS圖片拼合生成器,目前支持18種語(yǔ)言(包括簡(jiǎn)體中文)。該在線工具非常易用,你只需要上傳你需要拼合的CSS圖片壓縮包,設(shè)置重復(fù)圖片處理辦法,調(diào)整原圖大小,拼合圖片輸出設(shè)置參數(shù),CSS輸出選項(xiàng)即可生成CSS拼合圖片和CSS文件。

          css sprite generator是前端設(shè)計(jì)師高效率的在線工具首選。

          css sprite generator官方網(wǎng)站:spritegen.website-performance.org

          學(xué)習(xí)前端重在分享,希望大家把好的文章相互分享,共同學(xué)習(xí),共同進(jìn)步!



          上一篇:11款常見(jiàn)的Web應(yīng)用程序框架
          下一篇:為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器

          相關(guān)熱詞搜索:css sprite
          主站蜘蛛池模板: 3d精品重口littleballerina| 日本在线www| 欧美添下面视频免费观看| 永久中文字幕免费视频网站| 欧美一卡2卡3卡4卡免费| 日韩精品视频美在线精品视频| 无码av岛国片在线播放| 天堂8中文在线最新版在线| 国产麻豆交换夫妇| 国产男女猛视频在线观看| 国产一区二区三区不卡在线观看| 免费一级片在线| 免费人成视频在线观看不卡| 亚洲一区无码中文字幕| 亚洲中文字幕久在线| 久久久精品波多野结衣| 一级性生活视频| √最新版天堂资源网在线| 日本免费网站视频www区| 老司机亚洲精品| 欧美性猛交xxxx免费看蜜桃| 成人综合伊人五月婷久久| 国产精品美女自在线观看免费| 处女的第一次电影| 国产又粗又长又硬免费视频| 亚洲综合色区中文字幕| 久久国产精品一区| 91大神在线看| 精品理论片一区二区三区| 欧美俄罗斯乱妇| 小婷的性放荡日记h交| 国产高清在线精品免费软件| 国产xxxx色视频在线观看| 亚洲伊人久久大香线蕉结合| 中出五十路免费视频| 亚洲精品aaa| 浪荡女天天不停挨cao日常视频| 日本高清色www网站色| 国产精品综合视频| 免费看又黄又无码的网站| 久久婷婷五月国产色综合|