CSS Sprites的一些技巧

2022-02-03 00:48:26 字數 959 閱讀 5763

下面是一張樣圖:

本文的目的並不是講css sprite如何讓乙個**更快,而是說一些使用css sprite的時候的一些最佳實踐。

如果你邊切圖邊寫css,然後等你完成了整個**之後再來拼接這些到乙個sprite中,你就不得不完全重寫你的css,你也必須要花費很多的時間來用ps拼接大量的——這是件令人倍感糾結的事情。但是如果邊切圖邊整合,就會比較容易些。

這個小技巧貌似比較難理解。我直到建立乙個比較大的sprite的時候才理解到這一點。比如,如果我們希望乙個出現在乙個元素的左側:

將那個放到sprite的右邊(本文開始的那個sprite)。這樣的話,當你通過css移動背景的位置的時候,基本上不可能有其它的小意外的出現在它的附近。使用sprite的時候常常遇到的乙個問題是會出現在它不該出現的位置。

當使用css sprite的時候,只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時候是可行的,但是問題是,當你在寬度上或高度上擴充套件相關sprite的時候,原先設定的位置可能是錯的,因為那個已經不再sprite的底部或右部了。使用確切的位置來避免這個問題。

就像你在本文頂部的例項看到的那樣,那些小都被預留了足夠的空間。為什麼不把他們塞到一塊來讓sprite更小呢? 因為使用這些的元素通常都會有大量的內容而且可能會需要擴充套件的間距,以至於其它不會意外出現。

例子:例子中的每個條目都有個帶數字的作為背景。如果你仔細看了上面的那張,你可以看到這三個數字是如何錯開排列的,這樣如果內容增多,其它就不會意外出現。

如果你的**經過良好的設計,那麼你將會有一大堆的來整合進到sprite裡面,這樣你就需要你個非常大的sprite來恰當的放置這些。這是很不錯的。sprite裡的空白不會占用太多的檔案大小。addons.mozilla.org上使用的sprite有1,000px×2,000

px那麼大,但是的大小僅僅16.7kb!

android UI 的一些技巧

一 去掉edittext的背景顏色 android background null 二 listview 修改某行的值,因為一些功能邏輯,需要修改listview某行的值,那麼就可通過下面的方法,獲取到對應的listview的某行,然後修改。private void updateview int i...

MySQL的一些技巧

使用rand 獲取隨機結果 在order by語句中可按照如下的隨機順序檢索資料行 mysql select from tbl name order by rand order by rand 同 limit 的結合從一組列中選擇隨機樣本很有用 mysql select from table1,ta...

VIM 的一些技巧

vim配置檔案 vimrc 如果沒有自己建立乙個即可 filetype plugin indent on 開啟外掛程式 set number 顯示行號 syntax on 語法高亮 set cindent set transparency 15 透明度 set guioptions aace 去掉 ...