css sprite 座標定位為何為負以及定位方法
阿新 • • 發佈：2019-02-15
用這個的時候，關於最後的 background-position 屬性2個引數理解出了偏差，網上很多地方都沒解釋清楚。特意查了下了解清楚（源於指令碼之家）。
說說原理先：
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
1234代碼：div{ background:#FFF url(image) no-repeat fixed x y;}
這裡的background的屬性值依次為：
#FFF 背景色：（顏色值，背景圖片沒有覆蓋的地方，或者沒有背景圖片時表現的背景色）
image 背景圖片：（這裡是圖片的地址）
no-repeat 是否重複：（圖片小於容器的大小時，預設會重複排列圖片以填滿容器，no-repeat表示不重複，只有這個時候後面的定位座標才有用。）
fixed 背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，預設是scroll）
x y 背景影象的定位：（注意，只有在no-repeat下定位才有意義。這個就是今天要講的重點）
理解點---在於 background-position的屬性值：
1、兩個值前面一個是橫向的定位，我們稱為x軸方向定位。後面一個值是縱向的定位，我們稱為y軸方向定位。如果只有一個值，那預設的就是x軸方向，這時y軸方向就預設的是上下居中對齊，也就是center。
2、座標軸的原點就是對應容器的左頂點。
3、這個座標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都為正。
4、x y值分別表示背景圖片的左頂點相對於座標原點（也就是容器的左頂點）的值。
5、x y的值可以用百分比或者px來表示。
6、x y也可以用“left、right、top、bottom、center”這五個對齊方式來表示，但注意：用“left、right、top、bottom、center”來表示的時候，應用的是對齊規則，而不是座標規則。x為left是表示圖片的左邊和容器的左邊對齊，為right的時候表示圖片的右邊和容器的右邊對其，y為top的時候表示圖片的頂部和容器的頂部對齊，為bottom時表示圖片的底部和容器的底部對齊，x y等於center的時候表示居中對齊。
7、x y用百分比或者px表示的時候，其值可以為負數。我們應用座標規則就很容易理解負數表示的意義，x為負數時候表示圖片左頂點在容器左頂點的左側，y為負數時表示圖片的左頂點在容器的左定點的上方。也就是向左和向上超出容器的範圍。
當為百分數時候：
左頂點距容器左頂點的座標位置為
x：（容器的寬度-圖片的寬度）x50%
y：（容器的高度-圖片的高度）x（-30%）
CSS Sprites優點
利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
CSS Sprites缺點
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點
在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內不會出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什麼難度，但是很繁瑣；幸還好有CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，複製，拷貝就OK！
CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的位元組就增加了，還要改動css。
CSS Sprites非常值得學習和應用，特別是頁面有一堆ico（圖示）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
圖片優化
1. 對於非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節省10%-30%的檔案體積。
2. Photoshop相比起Fireworks，匯出同等質量的PNG圖片，體積會稍大。而Fireworks雖然做了相應壓縮優化，但沒有達到最優秀的壓縮。
3. 我所知的設計軟體，對於PNG圖片的處理都沒做到最優秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的”影象優化工具” 做無失真的壓縮優化。
4. 圖片體積及尺寸方面，建議體積保持在100K以內(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸)。(從某權威人事中得知，具體無從考證)
CSS Sprites圖片切割術
1. CSS Sprites圖片順序合圖片由上至下、左至右新增。而background-position一般採用數字組合形式定位，這樣能減少維護帶來的不必要麻煩。
2. 不建議CSS Sprites圖片中保持一定的間距，因為檔案size增大而增加檔案體積。
3. CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數，因為少色數的圖片檔案體積會相對的小。
4. size相同的CSS Sprites圖片中留有較大空隙，某程度上多數情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
5. 在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的檔案體積要大。
6. 在CSS Sprites圖片中，水平排列的圖片會比垂直排列的檔案體積要大。
7. 圖片對等合併：應用CSS Sprites圖片時，適當地把對等相同的影象合併，以節省空間及減少體積。
8. 區分開不需要合併的影象：如當前使用者確定只顯示一種狀態或一個級別時，不必要把其他的級別或狀態的圖片合併。
9. 黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文字前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬。
補兩條
10. 有的說定位時避免使用bottom或right等，當使用CSS sprite的時候，只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時候是可行的，但是問題是，當你在寬度上或高度上擴充套件相關sprite圖片的時候，原先設定的位置可能是錯的，因為那個圖片已經不再Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。
其實我感覺一般情況寬度圖不片不會改應變，用RIGHT和 LEFT還是挺方便的，但從整體考慮，升級了。改版的。圖片寬度還是有可能會改變的。必竟開始時做太寬也沒什麼好處，還是浪費很多空間。就是多費點時間去對座標，最好還是不用RIGHT 和 LEIFT的了。
12 有的說竟給每個圖片足夠的空間
就像你在本文頂部的例項圖片看到的那樣，那些小圖片都被預留了足夠的空間。為什麼不把他們塞到一塊來讓sprite圖片更小呢? 因為使用這些圖片的元素通常都會有大量的內容而且可能會需要擴充套件的間距，以至於其它圖片不會意外出現。
這個我支援，必竟多空點，也佔不不了多大空間，如何要追求完美，那就慢慢調吧。費了勁了。在加上瀏覽器相容問題，最好還大多空間。小誤差也忽略了。
說說原理先：
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
1234代碼：div{ background:#FFF url(image) no-repeat fixed x y;}
這裡的background的屬性值依次為：
#FFF 背景色：（顏色值，背景圖片沒有覆蓋的地方，或者沒有背景圖片時表現的背景色）
image 背景圖片：（這裡是圖片的地址）
no-repeat 是否重複：（圖片小於容器的大小時，預設會重複排列圖片以填滿容器，no-repeat表示不重複，只有這個時候後面的定位座標才有用。）
fixed 背景是否隨容器滾動：（有兩個可選值，scroll滾動，fixed不滾動，預設是scroll）
x y 背景影象的定位：（注意，只有在no-repeat下定位才有意義。這個就是今天要講的重點）
理解點---在於 background-position的屬性值：
1、兩個值前面一個是橫向的定位，我們稱為x軸方向定位。後面一個值是縱向的定位，我們稱為y軸方向定位。如果只有一個值，那預設的就是x軸方向，這時y軸方向就預設的是上下居中對齊，也就是center。
2、座標軸的原點就是對應容器的左頂點。
3、這個座標的y軸箭頭朝下，也就是右下方（容器內部）x y的值才都為正。
4、x y值分別表示背景圖片的左頂點相對於座標原點（也就是容器的左頂點）的值。
5、x y的值可以用百分比或者px來表示。
6、x y也可以用“left、right、top、bottom、center”這五個對齊方式來表示，但注意：用“left、right、top、bottom、center”來表示的時候，應用的是對齊規則，而不是座標規則。x為left是表示圖片的左邊和容器的左邊對齊，為right的時候表示圖片的右邊和容器的右邊對其，y為top的時候表示圖片的頂部和容器的頂部對齊，為bottom時表示圖片的底部和容器的底部對齊，x y等於center的時候表示居中對齊。
7、x y用百分比或者px表示的時候，其值可以為負數。我們應用座標規則就很容易理解負數表示的意義，x為負數時候表示圖片左頂點在容器左頂點的左側，y為負數時表示圖片的左頂點在容器的左定點的上方。也就是向左和向上超出容器的範圍。
當為百分數時候：
左頂點距容器左頂點的座標位置為
x：（容器的寬度-圖片的寬度）x50%
y：（容器的高度-圖片的高度）x（-30%）
CSS Sprites優點
利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的效能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
CSS Sprites能減少圖片的位元組，曾經比較過多次3張圖片合併成1張圖片的位元組總是小於這3張圖片的位元組總和。
CSS Sprites缺點
誠然CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點
在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內不會出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
CSS Sprites在開發的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什麼難度，但是很繁瑣；幸還好有CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經比photoshop測量來的方便多了，而且樣式直接生成，複製，拷貝就OK！
CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的位元組就增加了，還要改動css。
CSS Sprites非常值得學習和應用，特別是頁面有一堆ico（圖示）。總之很多時候大家要權衡一下利弊，再決定是不是應用CSS Sprites。
圖片優化
1. 對於非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節省10%-30%的檔案體積。
2. Photoshop相比起Fireworks，匯出同等質量的PNG圖片，體積會稍大。而Fireworks雖然做了相應壓縮優化，但沒有達到最優秀的壓縮。
3. 我所知的設計軟體，對於PNG圖片的處理都沒做到最優秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的”影象優化工具” 做無失真的壓縮優化。
4. 圖片體積及尺寸方面，建議體積保持在100K以內(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸)。(從某權威人事中得知，具體無從考證)
CSS Sprites圖片切割術
1. CSS Sprites圖片順序合圖片由上至下、左至右新增。而background-position一般採用數字組合形式定位，這樣能減少維護帶來的不必要麻煩。
2. 不建議CSS Sprites圖片中保持一定的間距，因為檔案size增大而增加檔案體積。
3. CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數，因為少色數的圖片檔案體積會相對的小。
4. size相同的CSS Sprites圖片中留有較大空隙，某程度上多數情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
5. 在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的檔案體積要大。
6. 在CSS Sprites圖片中，水平排列的圖片會比垂直排列的檔案體積要大。
7. 圖片對等合併：應用CSS Sprites圖片時，適當地把對等相同的影象合併，以節省空間及減少體積。
8. 區分開不需要合併的影象：如當前使用者確定只顯示一種狀態或一個級別時，不必要把其他的級別或狀態的圖片合併。
9. 黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文字前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬。
補兩條
10. 有的說定位時避免使用bottom或right等，當使用CSS sprite的時候，只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時候是可行的，但是問題是，當你在寬度上或高度上擴充套件相關sprite圖片的時候，原先設定的位置可能是錯的，因為那個圖片已經不再Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。
其實我感覺一般情況寬度圖不片不會改應變，用RIGHT和 LEFT還是挺方便的，但從整體考慮，升級了。改版的。圖片寬度還是有可能會改變的。必竟開始時做太寬也沒什麼好處，還是浪費很多空間。就是多費點時間去對座標，最好還是不用RIGHT 和 LEIFT的了。
12 有的說竟給每個圖片足夠的空間
就像你在本文頂部的例項圖片看到的那樣，那些小圖片都被預留了足夠的空間。為什麼不把他們塞到一塊來讓sprite圖片更小呢? 因為使用這些圖片的元素通常都會有大量的內容而且可能會需要擴充套件的間距，以至於其它圖片不會意外出現。
這個我支援，必竟多空點，也佔不不了多大空間，如何要追求完美，那就慢慢調吧。費了勁了。在加上瀏覽器相容問題，最好還大多空間。小誤差也忽略了。