失敗提示：
1、控制臺報錯file not found。
2、資源的images文件夾下找不到加載的圖片。

失敗可能原因：
1、圖片路徑錯誤（最常見）：層級關系一定要對。
2、css選擇器編寫錯誤（我就是這樣，整了好久才發現，真是笨死了）。

---

精靈圖片實現方法

/*HTML代碼*/ <header><p><img src="images/banner.jpg"></p><div class="icon-list"><div class="iconset coffee0"></div><div class="iconset coffee1"></div><div class="iconset coffee2"></div><div class="iconset coffee3"></div></div> </header> /*CSS代碼*/ .iconset {display: inline-block;float: right;background-image: url("images/coffee.png");width: 18px;height: 18px; } header .icon-list .coffee0 {background-position: -24px -48px; } header .icon-list .coffee1 {background-position: -24px -72px; } header .icon-list .coffee2 {background-position: -24px -96px; } header .icon-list .coffee3 {background-position: -24px -120px; }

實現效果圖
圖中微博皇冠等級圖片為精靈圖片。

總結

以上是生活随笔為你收集整理的css实现精灵图片加载图片失败的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。