A. CSS雪碧圖的按鈕，中間部分背景平鋪怎麼寫
background-repeat:repeat;//背景重復
background-size:100%;//背景圖大小，圖片會拉伸呈現
B. web前端什麼是雪碧圖
雪碧圖被運用在眾多使用了很多小圖標的網站上。相對於把每張小圖標以.png格式文件的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對內存和帶寬更加友好。
使用雪碧圖的優點有以下幾點：
將多張圖片合並到一張圖片中，可以減小圖片的總大小
將多張圖片合並到一張圖片後，只需一次網路請求就可以將所需的資源全部下載，減小建立連接的消耗，在移動端尤為明顯
雪碧圖的製作與使用方法：
使用圖像編輯軟體如Photoshop將多張圖放到同一個圖層並導出或使用自動化構建工具自動拼接合並後的圖片
引用圖片時，圖片地址為合並後的圖片地址，通過background-position調整背景圖的位置，並通過容器的寬高共同作用，來選出所需的圖片
注意：
在HTTP2中，已經不需要考慮減少請求數，故雪碧圖在HTTP2中優化性能的意義已經不大
C. 如何給製作好的css雪碧圖裡面添加背景顏色
一般情況下雪碧圖是用在背景裡面的（background）,然後通過background-position來調整位置的，那麼顏色可以是backround-color來控制，簡寫就比如：
background:#f00 url('xbt.png') -100px -100px no-repeat;
//這兒假設雪碧圖是xbt.png，路徑也是正確的，那麼你就可以根絕上面的格式來引用雪碧圖；這句話的意思是 紅色背景（#f00）、引入圖片（url('xbt.png')）、向上 向左 各偏移-100px（ -100px -100px ）、圖片不復制（no-repeat）;
D. 如何規劃站點的雪碧圖
一般會有哪幾種類型的雪碧圖？雪碧圖的尺寸該設置多大？如何排列？雪碧圖在站點中如何分布？是否曾經煩惱過以上幾點問題？帶著上面幾點問題，我們一起來探討站點的雪碧圖該如何規劃比較合理。首先讓我們回憶一下，以前切頁面時，會用到哪些類型的素材圖？我努力的想…努力的想啊…大概有：按鈕、圖標、其它固定尺寸背景圖、橫豎平鋪背景圖、橫鋪背景圖、豎鋪背景圖、左右自適應背景圖、上下自適應背景圖、顏色鮮艷且尺寸較大的背景圖。好像有點亂，讓我們分下類。按雪碧圖使用的作用域可分為：跨項目通用、全局、欄目級、頁面級按雪碧圖實現方式可分為：固定尺寸雪碧圖、橫鋪雪碧圖、豎鋪雪碧圖(比較少用)、橫豎平鋪背景圖(比較少用)�0�2那麼，再把我們回想的素材圖歸下類：按作用域：這些素材在不同站點都有可能出現在不同作用域中按實現方式：固定尺寸雪碧圖：按鈕、圖標、其它固定尺寸背景圖、顏色鮮艷且尺寸較大的背景圖橫鋪雪碧圖：橫鋪背景圖、左右自適應背景圖(不使用九宮格的實現方式)豎鋪雪碧圖：豎鋪背景圖、上下自適應背景圖(不使用九宮格的實現方式)橫豎平鋪背景圖：這種圖不能合成雪碧圖，一般用於網頁背景花紋，大部分站點比較少出現最後，從站點的可實現性上考慮，我們該做多少張雪碧圖？請看下面這張表：從表中可以分析出，一個頁面的背景圖的請求數為：看到最最多的情況，是不是震驚了？呵呵，其實很少會發生全部用的情況，根據頁面實際情況組合使用，請求的個數不會很多，跟第一張圖例的背景圖請求數相比，規劃清晰很多，請求數也減少很多了。這些圖該如何切、如何分布、命名，有沒什麼講究？以下是我個人的觀點和建議：�0�2橫鋪圖寬度使用20px, 使用1px寬度橫鋪會有渲染性能問題，豎鋪同理。我就不詳細說明了，網上搜索，有相關示例。固定尺寸的雪碧圖一般可設定為寬度是網頁寬度的一半，高度隨圖片內容增長。因為切圖前你可能不確定用多大尺寸，我的見解是，到切圖後期你可能不需要單獨用一張repeat-x.png的圖放左右自適應的背景圖，多數情況我們會用2個標簽採用滑動門的方式實現左右自適應的背景，而頁面寬度的一半即可實現最大寬度的左右自適應背景，那麼這時你可以把左右自適應的背景放進這張雪碧圖中了拼合圖片時固定尺寸的圖與圖之間相隔1像素，避免瀏覽器放大時，尺寸多計算1像素時可見到臨近的圖片欄目級雪碧圖的名稱按欄目級目錄名命名，頁面級雪碧圖的名稱按頁面名稱命名，組件類和皮膚類雪碧圖同理，其它的可按表中的名稱命名，這樣方便區分和後期管理跨項目通用的組件或某個組件的圖片內容較多、修改頻繁，可以獨立出一張組件圖，按組件名命名，方便管理如果站點的全局圖標比較多，可以考慮將圖標單獨做一張雪碧圖建議圖標使用一個新標簽實現，而不是直接用有內容的那個標簽設定圖標背景，這樣你需要給雪碧圖圖標與圖標之間多留一些間距，另外遇到不同行高的時候，為了讓圖標背景垂直居中，還需要重新設定background-position，這種實現方式不利納入全局樣式以上是個人的一些經驗和觀點，僅供參考，大家對雪碧圖的規劃有什麼好的建議和看法，歡迎留言一起探討。
E. CSS雪碧的原理
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽。
一個簡單的例子：
一個鏈接用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active。
<a class=button href=#>鏈接</a>
加入右側的圖片為：200px×65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、滑鼠滑過、滑鼠點擊的狀態。則可以使用CSS進行定義。
a {
display:block; width:200px; height:65px; line-height:65px; /*定義狀態*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0; /*定義鏈接的普通狀態，此時圖像顯示的是頂上的部分*/}
a:hover {background-position:0 -66px; /*定義鏈接的滑過狀態，此時顯示的為中間部分，向下取負值*/}
a:active {background-position:0 -132px; /*定義鏈接的普通狀態，此時顯示的是底部的部分，向下取負值*/}
初學的朋友可以試試效果。
而更多的CSS雪碧，圖片更復雜，背景定位更精確。可能會用到大量的數值，如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位。
F. 求ps高手，我想把這個雪碧的圖片P成可樂的。圖片處理
真心服了你了。你自己去網上把這個源文件下載下來。（源文件應該是psd的）把背景一換，瓶子一換。名字一換不就完了。（在昵圖網上面下載，可以按照用戶名或者右下角的圖片編號搜索下載。）
G. html為什麼用雪碧圖而不用img
回答你問題前先說一下什麼是雪碧圖？
雪碧圖：CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合並技術，該方法是將小圖標和背景圖像合並到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分
在來說一下為什麼用雪碧圖，有什麼優點？
減少載入網頁圖片時對伺服器的請求次數
提高頁面的載入速度
減少滑鼠滑過的一些bug
結論：雪碧圖的優點就是在減少請求次數，如果一個網站有一1000個小圖標，你用img,你要請求1000次，這個對網路會有堵塞，還有對用戶體驗也不夠好，如果你有了雪碧圖，只要載入一次就可以了，雪碧圖的不足就是在於後期的維護。
H. html css關於雪碧圖的一個問題~
background-position需要x軸和Y軸兩個值，如果只寫一個值，第二個值默認center。所以就沒有繼承一說了，你想hover重置第二個值，第一個值也是要再寫一遍的，不能繼承。
I. css 雪碧圖的坐標問題，為何我弄完雪碧圖後還是這樣的
你要確保你每個寫了背景的標簽的寬度高度都寫好了。這樣背景圖才不會完全都顯示出來。
J. css雪碧圖只能做背景圖片嗎
如果是css只能設置為背景圖片如果不想作為背景圖片在html內添加<img>標簽