CSS鐨剆prite鏄皢澶氫釜灏忓浘鐗囧悎骞舵垚涓€寮犲ぇ鍥剧墖锛屽苟閫氳繃CSS鐨刡ackground-position灞炴€у皢闇€瑕佺殑閮ㄥ垎鏄剧ず鍑烘潵锛屼互鍑忓皯椤甸潰鍔犺浇鐨勮姹傛鏁板拰鎻愰珮椤甸潰鎬ц兘銆?br/>浣跨敤CSS鐨剆prite锛岄渶瑕佹寜鐓т互涓嬫楠よ繘琛屾搷浣滐細
1. 灏嗛渶瑕佸悎骞剁殑灏忓浘鐗囨斁鍦ㄤ竴寮犲ぇ鍥剧墖涓紝鍙互浣跨敤鍥惧儚缂栬緫杞欢锛堝Adobe Photoshop锛夋潵瀹屾垚杩欎釜姝ラ銆傜‘淇濇瘡涓皬鍥剧墖涔嬮棿鏈変竴瀹氱殑闂撮殧锛屼互鍏嶅湪鏄剧ず鏃跺嚭鐜伴噸鍙犮€?br/>2. 鍦–SS鏂囦欢涓畾涔変竴涓被鎴栭€夋嫨鍣紝鐢ㄤ簬鏄剧ずsprite鍥剧墖銆備緥濡傦細
```css
.sprite {
 background-image: url(path/to/sprite-image.png);
}
```
3. 鍦ㄩ渶瑕佷娇鐢╯prite鍥剧墖鐨勫厓绱犱笂娣诲姞璇ョ被鎴栭€夋嫨鍣ㄣ€備緥濡傦細
```html

```
4. 浣跨敤background-position灞炴€ф潵鎸囧畾鏄剧ず鐨勪綅缃€傛牴鎹渶瑕佹樉绀虹殑灏忓浘鐗囧湪sprite鍥剧墖涓殑浣嶇疆锛岃缃悎閫傜殑鍊笺€備緥濡傦細
```css
.sprite {
 background-position: -10px -20px;
 /* 绗竴涓€艰〃绀烘按骞虫柟鍚戠殑鍋忕Щ閲忥紝绗簩涓€艰〃绀哄瀭鐩存柟鍚戠殑鍋忕Щ閲?*/
}
```
閫氳繃浠ヤ笂姝ラ锛屽氨鍙互浣跨敤CSS鐨剆prite鏉ユ樉绀洪渶瑕佺殑灏忓浘鐗囦簡銆傚彲浠ユ牴鎹渶瑕佸湪涓嶅悓鐨勫厓绱犱笂浣跨敤涓嶅悓鐨勭被鎴栭€夋嫨鍣紝骞惰缃笉鍚岀殑background-position鍊硷紝浠ユ樉绀轰笉鍚岀殑灏忓浘鐗囥€?/p>