應該是緩存的問題可以適當清理瀏覽器緩存，其次我覺得你既然加上了背景就沒有必要加顏色了，如果真的沒作用建議你換一下圖片格式做測試 還有就是style里應該加上屬性type="text/css" 一下是我的代碼請供參考:
創(chuàng)新互聯(lián)網站建設公司，提供成都網站設計、網站制作，網頁設計，建網站，PHP網站建設等專業(yè)做網站服務;可快速的進行網站開發(fā)網頁制作和功能擴展；專業(yè)做搜索引擎喜愛的網站，是專業(yè)的做網站團隊，希望更多企業(yè)前來合作!
style?type="text/css"
div{
background:?url("easyui/themes/metro-red/images/panel_tools.png");
background-repeat:no-repeat;
width:?100px;
height:?100px;
}
/style
/head
body
div/div
/body
HTML5新特性如下：
1、脫機緩存。您可以在關閉瀏覽器并再次打開時還原數(shù)據(jù)，以減少網絡流量。
2、音頻和視頻可以自由嵌入，多媒體形式更加靈活。
3、地理位置。地理位置定位使得定位導航不再是專屬導航軟件，地圖也不需要下載很大的地圖包。它可以通過緩存、去哪里、去哪里以及更靈活的方式來解決。
4、畫布繪制提高了移動平臺的繪制能力。canvas API可以用來繪制一個簡單的熱點地圖來收集用戶體驗數(shù)據(jù)，并支持對圖像的移動、旋轉、縮放等常規(guī)編輯。
5、豐富的互動方式。提高交互能力：拖動、撤消歷史操作、文本選擇等。
6、與原生app相比，開發(fā)維護成本低。降低開發(fā)和維護成本；？使頁面更小，減少用戶不必要的開銷；性能更好，功耗更低。
7、CSS3視覺設計師的輔助利器支持。CSS3支持字體嵌入、布局和最令人印象深刻的動畫功能。
8、HTML5調用相機、相冊和通訊錄的功能。
擴展資料：
2014年10月29日，萬維網聯(lián)盟宣布，HTML第五次重大修訂，經過近8年的努力，標準規(guī)范終于完成。HTML5旨在支持移動設備上的多媒體。引入了新的語法特性來支持這一點，如視頻、音頻和畫布標記。HTML5還引入了一些新功能，這些功能可以真正改變用戶與文檔交互的方式，包括增強靈活性的新解析規(guī)則、新屬性、過時或冗余屬性等。
HTML5的離線web應用允許我們在脫機時與網站進行交互。這在提高網站的訪問速度和制作一款web離線應用上（如HTML5游戲）有很大的使用價值。
先來了解一下HTML5應用程序緩存和瀏覽器緩存的區(qū)別。
（有些）瀏覽器會主動保存自己的緩存文件以加快網站加載速度。但是要實現(xiàn)瀏覽器緩存必須要滿足一個前提，那就是網絡必須要保持連接。如果網絡沒有連接，即使瀏覽器啟用了對一個站點的緩存，依然無法打開這個站點。只會收到一條錯誤信息。而使用離線web應用，我們可以主動告訴瀏覽器應該從網站服務器中獲取或緩存哪些文件，并且在網絡離線狀態(tài)下依然能夠訪問這個網站。
在這篇文章中，我們將展示如何創(chuàng)建乖巧離線的網頁和應用程序使用下面的HTML5功能：
AppCache本地存儲文件資源，離線訪問它們作為URL
索引型數(shù)據(jù)庫存儲結構化數(shù)據(jù)在本地，你可以訪問和查詢它
DOM存儲在本地存儲少量的文字信息，
離線事件來檢測，如果你€ 重新連接到網絡
例：隨時隨地訪問數(shù)據(jù)的離線支持
讓我們€?的說，你去購物，從您?最喜愛的食品網站?的配方的打印輸出，但是當你€?重新在市場上，你塔卡納€?噸找到一些關鍵的成分。
試想一下，當你在家中使用移動PC瀏覽?食譜網站?，部分網站會自動下載離線使用。這可以讓你把你的手機PC到店，訪問該網站，并在市場尋找一個新的配方。?最好的部分?是，你可以做到這一點，?而??被連接到網絡。作為一個消費者，您的網站感激，因為它只是工作時，你需要它。
離線的'蛋糕'這個詞使用的食譜網站的搜索結果。
作為一個開發(fā)者，你可以使這些類型的場景相結合的離線技術：?AppCache?，索引型數(shù)據(jù)庫?，?DOM存儲?，?WebSockets的?（或?XHR?）。?在探索個人的技術，讓我們的探討的好處。
Metro風格的應用程序和網站，離線技術讓你來處理連接故障。想象一下，您的用戶填寫一個表格，他失去網絡連接。您的網站或Metro風格的應用程序應該怎么做呢？連接自由發(fā)展的心態(tài)可以讓您的應用程序是否連接到網絡或不正確地獨立工作。你的應用程序將正常工作。
在更復雜的情況下，Web站點和應用程序允許用戶創(chuàng)建新的內容，并存儲新的數(shù)據(jù)，即使應用程序是完全脫機。試想一下，無縫地工作在脫機狀態(tài)下，如Outlook今天的Outlook Web Access（OWA）的Hotmail或GMail。
離線技術也可以通過本地緩存的資源服務，預緩存將來信息和轉移從云（或網絡）到客戶端設備的處理能力，提高整體性能。信息越多，你€?重新能夠緩存在本地，在本地搜索，并計算在本地服務器和用戶的體驗將更快，需要更少的資源熱轉印機?。
有一個Metro風格的應用程序離線工作的期望高于網站的脫機工作。因為他們使用從商店的自我包含的程序包部署，用戶希望他們有某種類型的離線功能（如游戲，書籍，食譜等）。即使這些應用程序是無法創(chuàng)建或訪問新的內容，以前的內容應該是可見的（例如聯(lián)系人，會議，飼料，雜志等）。
本地緩存文件資源使用AppCache
AppCache使您能夠創(chuàng)建長壽命的本地緩存下載的文件資源，資源可以訪問而離線或使用的同時在線，以提高性能。試想一下，一個三歲的孩子使用一臺筆記本電腦，下載一個交互式的Web的游戲（KidsBook）從您的家庭網絡。如果應用程序的資源存儲在本地，孩子可以繼續(xù)在車上玩游戲，那里沒有網絡連接。
如果KidsBook使用AppCache，本場比賽將有緩存必要的資源（的JavaScript，HTML，CSS，音頻，視頻等）時，先下載后從網絡上斷開時，播放的游戲。這可以讓孩子保持愉悅，即使設備本身沒有網絡連接。
AppCache創(chuàng)作流程。
要看到如何啟用互動網頁游戲脫機工作，檢查出?KidsBook的?IE Test Drive網站?上的例子。
AppCache使用一個manifest文件，以緩存的內容從網站上指定資源的URI。幕后發(fā)生后，瀏覽器顯示網頁，它允許在清單文件中定義的資源被下載的緩存。這保證了資源下載到本地機器上，作為一個單位在一個事務中，創(chuàng)建一個本地的緩存。如果一個單一的資源下載失敗，沒有創(chuàng)建高速緩存。要更新存儲在緩存中的內容，在您的服務器更新清單文件。當用戶下次訪問該網站時，瀏覽器比較明顯的服務器上的文件的緩存副本。如果緩存的艙單副本是不同的服務器副本，新版本更新清單文件中定義的內容高速緩存的使用。
AppCache還允許Internet Explorer和Metro風格的應用程序在脫機狀態(tài)下使用傳統(tǒng)的URL的訪問緩存的資源。這可以讓你在瀏覽器窗口中鍵入一個URL，并沒有任何網絡連接的情況下訪問此信息。此外，脫機頁可以解決的URI使用本地緩存的信息。代碼示例來看看在?HTML5應用程序緩存（“?AppCachea）?部分中的?IE10開發(fā)人員指南?。
總體而言，AppCache提供了一定的優(yōu)勢HTTP的緩存。HTTP緩存沒有噸保證緩存的資源之后將TIF（臨時Internet文件）將被清除。此外，HTTP緩存沒有€?噸正確地解決在脫機狀態(tài)下的URL。然而，HTTP緩存可用于優(yōu)化AppCache的行為，通過指定的緩存資源的生命周期。如果從網站上下載或復制的資源從緩存的本地高速緩存中創(chuàng)建一個新的版本時，這將決定。
Metro風格的應用可以受益于AppCache通過在本地緩存的Web資源的訪問的頁框，它允許脫機訪問的內容。
高速緩存大型本地使用索引型數(shù)據(jù)庫的結構化數(shù)據(jù)
索引型數(shù)據(jù)庫?是一個本地JavaScript對象存儲在本地機器上的數(shù)據(jù)庫，允許快速索引和搜索的對象。前面介紹的?食譜網站，?包括16食譜從父站點中提取的數(shù)據(jù)庫。想象一下，用一個RSS feed，一個WebSocket或XHR連接的，定期更新這個數(shù)據(jù)庫。這將使您的用戶能夠訪問到最新的食譜，即使他們有沒有網絡連接。
索引型數(shù)據(jù)庫，您可以直接操作和索引的JavaScript對象。使用索引型數(shù)據(jù)庫搜索本地信息的優(yōu)點是它不會強迫你總是在云中搜索，降低了計算成本。這是假設你€?重新能夠維持，是緩存在本地系統(tǒng)中的數(shù)據(jù)的相關性。
理論上，瀏覽器會自動緩存圖片的，
如果你的瀏覽器沒有緩存，那有可能你把瀏覽器緩存禁用了，
還有一點是，即使是緩存了，瀏覽器還是會請求服務器的，但是請求的內容是，驗證圖片是否有修改，如果圖片沒有修改，那么服務器會返回狀態(tài)碼為300，而不是200，300意味著圖片沒有修改，那么瀏覽器就可以取本地緩存了，200是說圖片下載傳輸完成的意思，就是說從服務器下載完成 ，
我覺得你的問題，應該是看到了瀏覽器請求，但是沒有看狀態(tài)嗎的問題。
在明確一下：即使是緩存了，也會有請求的，只是請求的返回結果，是不是需要重新下載數(shù)據(jù)(圖片)
引言
本篇文章主要介紹了前端HTML5幾種存儲方式的總結 ，主要包括本地存儲localstorage，本地存儲sessionstorage，離線緩存（application cache），Web SQL，IndexedDB。有興趣的可以了解一下。
正文開始~
h5之前，存儲主要是用cookies。cookies缺點有在請求頭上帶著數(shù)據(jù)，大小是4k之內。主Domain污染。
主要應用：購物車、客戶登錄
對于IE瀏覽器有UserData，大小是64k,只有IE瀏覽器支持。
目標
存儲方式：
以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。
大?。?/p>
每個域名5M
支持情況：
注意：IE9 localStorage不支持本地文件，需要將項目署到服務器，才可以支持！
常用的API：
getItem //取記錄
setIten//設置記錄
removeItem//移除記錄
key//取key所對應的值
clear//清除記錄
存儲的內容：
數(shù)組，圖片，json，樣式，腳本。。。（只要是能序列化成字符串的內容都可以存儲）
HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的，區(qū)別在于 sessionStorage 在關閉頁面后即被清空，而 localStorage 則會一直保存。
本地緩存應用所需的文件
使用方法：
①配置manifest文件
頁面上：
Manifest 文件：
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。
manifest 文件可分為三個部分：
①CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存
②NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
③FALLBACK - 在此標題下列出的文件規(guī)定當頁面無法訪問時的回退頁面（比如 404 頁面）
完整demo：
服務器上： manifest文件需要配置正確的MIME-type，即 "text/cache-manifest"。
如Tomcat:
常用API：
核心是applicationCache對象，有個status屬性，表示應用緩存的當前狀態(tài)：
0（UNCACHED） : 無緩存， 即沒有與頁面相關的應用緩存
1（IDLE） : 閑置，即應用緩存未得到更新
2 （CHECKING） : 檢查中，即正在下載描述文件并檢查更新
3 （DOWNLOADING） : 下載中，即應用緩存正在下載描述文件中指定的資源
4 （UPDATEREADY） : 更新完成，所有資源都已下載完畢
5 （IDLE） : 廢棄，即應用緩存的描述文件已經不存在了，因此頁面無法再訪問應用緩存
相關的事件：
表示應用緩存狀態(tài)的改變：
checking : 在瀏覽器為應用緩存查找更新時觸發(fā)
error : 在檢查更新或下載資源期間發(fā)送錯誤時觸發(fā)
noupdate : 在檢查描述文件發(fā)現(xiàn)文件無變化時觸發(fā)
downloading : 在開始下載應用緩存資源時觸發(fā)
progress：在文件下載應用緩存的過程中持續(xù)不斷地下載地觸發(fā)
updateready : 在頁面新的應用緩存下載完畢觸發(fā)
cached : 在應用緩存完整可用時觸發(fā)
Application Cache的三個優(yōu)勢：
① 離線瀏覽
② 提升頁面載入速度
③ 降低服務器壓力
注意事項：
1. 瀏覽器對緩存數(shù)據(jù)的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）
2. 如果manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程將視為失敗，瀏覽器繼續(xù)全部使用老的緩存
3. 引用manifest的html必須與manifest文件同源，在同一個域下
4. 瀏覽器會自動緩存引用manifest文件的HTML文件，這就導致如果改了HTML內容，也需要更新版本才能做到更新。
6. FALLBACK中的資源必須和manifest文件同源
7. 更新完版本后，必須刷新一次才會啟動新版本（會出現(xiàn)重刷一次頁面的情況），需要添加監(jiān)聽版本事件。
8. 站點中的其他頁面即使沒有設置manifest屬性，請求的資源如果在緩存中也從緩存中訪問
9. 當manifest文件發(fā)生改變時，資源請求本身也會觸發(fā)更新
離線緩存與傳統(tǒng)瀏覽器緩存區(qū)別：
1. 離線緩存是針對整個應用，瀏覽器緩存是單個文件
2. 離線緩存斷網了還是可以打開頁面，瀏覽器緩存不行
3. 離線緩存可以主動通知瀏覽器更新資源
關系數(shù)據(jù)庫，通過SQL語句訪問
Web SQL 數(shù)據(jù)庫 API 并不是 HTML5 規(guī)范的一部分，但是它是一個獨立的規(guī)范，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫的 APIs。
支持情況：
Web SQL 數(shù)據(jù)庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。
核心方法：
①openDatabase： 這個方法使用現(xiàn)有的數(shù)據(jù)庫或者新建的數(shù)據(jù)庫創(chuàng)建一個數(shù)據(jù)庫對象。
②transaction： 這個方法讓我們能夠控制一個事務，以及基于這種情況執(zhí)行提交或者回滾。
③executeSql： 這個方法用于執(zhí)行實際的 SQL 查詢。
打開數(shù)據(jù)庫：
執(zhí)行查詢操作：
插入數(shù)據(jù)：
讀取數(shù)據(jù)：
由這些操作可以看出，基本上都是用SQL語句進行數(shù)據(jù)庫的相關操作，如果你會MySQL的話，這個應該比較容易用。
索引數(shù)據(jù)庫 (IndexedDB) API（作為 HTML5 的一部分）對創(chuàng)建具有豐富本地存儲數(shù)據(jù)的數(shù)據(jù)密集型的離線 HTML5 Web 應用程序很有用。同時它還有助于本地緩存數(shù)據(jù)，使傳統(tǒng)在線 Web 應用程序（比如移動 Web 應用程序）能夠更快地運行和響應。
異步API：
在IndexedDB大部分操作并不是我們常用的調用方法，返回結果的模式，而是請求——響應的模式，比如打開數(shù)據(jù)庫的操作
這樣，我們打開數(shù)據(jù)庫的時候，實質上返回了一個DB對象，而這個對象就在result中。由上圖可以看出，除了result之外。還有幾個重要的屬性就是onerror、onsuccess、onupgradeneeded（我們請求打開的數(shù)據(jù)庫的版本號和已經存在的數(shù)據(jù)庫版本號不一致的時候調用）。這就類似于我們的ajax請求那樣。我們發(fā)起了這個請求之后并不能確定它什么時候才請求成功，所以需要在回調中處理一些邏輯。
關閉與刪除：
數(shù)據(jù)存儲：
indexedDB中沒有表的概念，而是objectStore，一個數(shù)據(jù)庫中可以包含多個objectStore，objectStore是一個靈活的數(shù)據(jù)結構，可以存放多種類型數(shù)據(jù)。也就是說一個objectStore相當于一張表，里面存儲的每條數(shù)據(jù)和一個鍵相關聯(lián)。
我們可以使用每條記錄中的某個指定字段作為鍵值（keyPath），也可以使用自動生成的遞增數(shù)字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以存儲的數(shù)據(jù)結構也有差異。
學習從來不是一個人的事情，要有個相互監(jiān)督的伙伴，想要學習或交流前端問題的小伙伴可以私信“學習”小明獲取web前端入門資料，一起學習，一起成長！
重慶分公司
重慶分公司
