CSS背景圖片在Chrome不加載

-1

.nav_arrow { 
    position: absolute; top: 50%; z-index: 15; 
    background-image: url(../img/arrow-navpage.png) !important; 
    width: 34px; height: 136px; 
    margin-top: -68px; } 

    .nav_arrow.next   { right: -34px; background-position: 0 0; } 
    .nav_arrow.next:hover { background-position: 0 -186px; } 

    .nav_arrow.prev   { left: -34px; background-position: 0 -372px; display: none; } 
    .nav_arrow.prev:hover { background-position: 0 -558px; }

圖片是一個/上一個按鈕的背景

但其在不加載。任何一個可以幫助我

來源

2013-12-17 sanjib

你確定你的圖片路徑是正確的嗎？ – Ming

將此添加到小提琴中http://jsfiddle.net/ –

只使用'background：url（../ img/arrow-navpage.png）！important;' – Igle

很難沒有小提琴就可以看到問題。但首先檢查是否加載了精靈圖像，然後檢查每張圖像的background-position。同時檢查.nav-arrow容器具有position:relative

來源

2013-12-17 08:16:16 n1kkou

使用元素督察（press F12），以查看是否正在加載的圖片。

在Elements標籤，你可以看到，如果你的CSS規則是正確的，或者通過右鍵點擊在元素本身
在資源選項卡，你可以看到，如果圖像路徑是正確的並且如果圖像正在加載。

如果這些chechs是正確的，可能你的CSS規則的可視化問題，可能與位置有關。

試試看，並告訴我們結果。

希望它有幫助。

來源

2013-12-17 08:22:08

也許試試這個：

.nav_arrow.next   { right: -34px; background-position: 0px 0px; } 
    .nav_arrow.next:hover { background-position: -186px 0px; } 
    .nav_arrow.prev   { left: -34px; background-position: -372px 0px; display: none; } 
    .nav_arrow.prev:hover { background-position: -558px 0px; }

我不知道爲什麼你使用左：-34px右：-34px;如果這個答案不幫你向我們顯示你的代碼

來源

2013-12-17 09:31:54 mcmac

CSS背景圖片在Chrome不加載

回答

相關問題