background-size之CSS Sprite巧用

前言
background-size:規定背景圖片的尺寸。爲CSS3屬性。so...萬惡的ie瀏覽器,此刻的心裏必定是崩潰的!說實話,做爲一個前端的coder,面對CSS3如此多的炫酷效果,我不能用起來,還要求我兼容ie8及如下,我必定放棄維護多年的淑女形象,拿起刀!!!幹什麼,你懂的!固然,我大天朝的XX網站以及領導的審美除外!畢竟,我仍是一朵須要祖國的陽光沐浴而茁長成長的老花朵!言歸正傳,聊一聊今天的主題。css

background-size

CSS3屬性。用法主要有下面4種。前端

  • length
    設置背景圖像的高度和寬度。
    第一個值設置寬度,第二個值設置高度。
    若是隻設置一個值,則第二個值會被設置爲 "auto"。
  • percentage
    以父元素的百分比來設置背景圖像的寬度和高度。
    第一個值設置寬度,第二個值設置高度。
    若是隻設置一個值,則第二個值會被設置爲 "auto"。
  • cover
    把背景圖像擴展至足夠大,以使背景圖像徹底覆蓋背景區域。
    背景圖像的某些部分也許沒法顯示在背景定位區域中。
  • contain
    把圖像圖像擴展至最大尺寸,以使其寬度和高度徹底適應內容區域。

CSS Sprite

CSS Sprites又做css精靈,是一種網頁圖片應用處理方式。它容許你將一個頁面涉及到的全部零星圖片都包含到一張大圖中去,減小單張圖片資源請求次數,以優化渲染性能。瀏覽器

本媛在coder的過程當中有極強的完美主義傾向以及近乎苛刻的強迫症。見不得代碼資源零碎和鬆散。因此,喜歡把一些描述性的圖片資源進行整合。固然雪碧圖就爲首選。製做雪碧圖的方法有不少。早年間最喜歡用ps。如今嘛,出現了不少優秀的製做工具。因此,打着時間是用來幹更有意義的事的旗號一本正經的偷起了懶。因此,關於怎麼製做一張雪碧圖,在這裏就不贅述。隨便一家搜索引擎隨便一搜都是一大票的解決方案。工具

  • CSS Sprite 應用
    雪碧圖其實就是把網頁中一些圖標以及零散的描述性圖片整合到一張圖片文件中,利用CSS的「background-image」,「background- repeat」,「background-position」的組合進行背景定位,background-position能夠用數字能精確的定位出背景圖片的位置。
    如,有一張以下的雪碧圖:性能



    對應的CSS代碼爲:優化

i.pic{ background: url('../../../static/dragComponentSprite.png') -15px -63px no-repeat; background-size: cover; } i.form{ background: url('../../../static/dragComponentSprite.png') -64px -63px no-repeat; background-size: cover; } i.btn{ background: url('../../../static/dragComponentSprite.png') -159px -63px no-repeat; background-size: cover; } i.map{ background: url('../../../static/dragComponentSprite.png') -111px -63px no-repeat; background-size: cover; } 

那麼問題來了......
通常在雪碧圖中的單個小圖都是必定大小的,與在網頁應用中的目標大小並不一致。好比在雪碧圖中單個圖標的大小是50 * 50,而目標大小是35 * 35,這個時候按照單圖來設置background-size:cover實際並不能如你所願正肯定位。網站

這是爲何呢?而這時候又該如何解決呢?難道如此美妙的雪碧圖和酷炫的CSS3不能兼得?!O My God Orz.......這簡直太絕望了有木有?ui

也許你會說,放棄雪碧圖,依然用小圖就能夠啦。固然能夠。但遇到困難就逃避不是本媛的性格!so,這種狀況下,就跳出以往單圖設置的框框。之因此出現這種情況應該是由於雪碧圖和目標圖的大小比例出現了問題。因此試想將雪碧圖按照必定的比例進行變化,而後在去利用background-position設置定位是否是就能夠解決了呢?那事實證實,這是可行的。搜索引擎

具體怎麼作呢?
你可能忘了,CSS3中的background-size的做用。它生來就是用來設置背景圖片的大小的。因此,咱們依然用它來解決上面雪碧圖應用中出現的問題。可是具體background-size要設置多大才合適呢。在這本媛就要傳授一個小訣竅給你啦。url

敲黑板,劃重點啦!請緊緊記住下面萬能的公式!!!

background-size 的寬度值 = (雪碧圖總寬度 * 目標圖像寬度) /雪碧圖中高分辨率圖像寬度

好比,咱們上面的問題。
我製做的雪碧圖中的圖標是高分辨率下的50px * 50px;
網頁中須要展現的目標圖標是35px * 35px;
製做的雪碧圖的總寬度是300px;
根據上面的公式 background-size 的寬度值 = (300 * 35)/50 = 210;
或許你已經注意到了,這裏我只計算了背景圖像的寬度值,並無設置高度,這裏就涉及到了background-size在響應式等比例縮放圖片的應用了。這裏暫不展開,下次能夠單開一篇章好好聊聊。因此,爲了確保背景圖像縮放比例正常,咱們將「height」值設置爲「auto」。到這裏。問題已經獲得了完美解決。

最終的CSS代碼爲:

i.pic{ background: url('../../../static/dragComponentSprite.png') -15px -63px no-repeat; background-size: 210px auto; } i.form{ background: url('../../../static/dragComponentSprite.png') -64px -63px no-repeat; background-size: 210px auto; } i.btn{ background: url('../../../static/dragComponentSprite.png') -159px -63px no-repeat; background-size: 210px auto; } i.map{ background: url('../../../static/dragComponentSprite.png') -111px -63px no-repeat; background-size: 210px auto; }
做者:離不開大海的魚 連接:https://www.jianshu.com/p/a5bb445f3f43 來源:簡書 簡書著做權歸做者全部,任何形式的轉載都請聯繫做者得到受權並註明出處。
相關文章
相關標籤/搜索