CSS：背景圖像顯示不出來

我試圖設計和創建一個個人項目客艙用戶界面，但我碰到的東西有問題......CSS：背景圖像顯示不出來

我有一個div作用作爲聊天室的退出按鈕。我有一個.png，我想用它作爲該元素的主要外觀。通過使用CSS的background: url()，我打算將它作爲該按鈕的背景，但似乎並未顯示出來。

我看着Chrome開發工具，但它說，它承認的圖片...這是正確鏈接，以及其他屬性均顯示，但由於某些原因，它根本沒有出現：

HTML：

<div class= "cB"> 
    <div class= "cB-header"> 
    <div class= "cB-buttons"> 
     <div class= "cB-exit"></div> 
    </div> 
    <div class= "cB-name">Ajeethen Uthayakumaran</div> 
    </div> 
    ... 
</div>

CSS：

.cB { 
    background-color: rgb(226, 226, 226); 
    position:absolute; 
    bottom:0; 
    width: 260px; 
    height: 350px; 
    float:right; 
} 

.cB-header { 
    background-color: rgb(0, 248, 66); 
    width: 100%; 
    height: 40px; 
} 
.cB-name { 
    display:inline-block; 
    width: 195px; 
    font-family:Oswald; 
    font-size: 16px; 
    color: rgb(0, 112, 38); 
    padding: 7px 10px 4px; 
} 
.cB-buttons { 
    display:inline-block; 
    float:right; 
} 

.cB-exit { 
    display:inline-block; 
    background: url(../img/exit.png) no-repeat; 
    height: 40px; 
    width: 40px; 
}

任何人有任何想法？如果您除了標記和CSS之外還需要其他內容，請發表評論。

UPDATE：文件的路徑是否正確連接...正確連接，我可以通過當Chrome爲我們提供了開發工具看到它... ...

然而，我才意識到，我的圖像是600 x 600，比我想要的40x40更大......這是否會改變什麼？

來源

2014-06-23 JaredCubilla

檢查您的文件路徑是否正確。文件路徑應該與其中包含CSS的文件相關。試試'url（'../ img/exit.png'）'。 – shennan

您的代碼適用於我的不同圖片網址：http://jsfiddle.net/jLNrv/ – showdev

耶，我找到了答案！

我注意到位於@ user3739658對我帖子的評論jsfiddle只顯示左上角。由於圖像大小爲600 x 600，它只是顯示了我的圖像的一個角落，透明，因此沒有出現。這是無法拖動...背景圖像不可拖動。

的height和width我只寫了聲明的DIV大小，但不是背景大小的...因爲今天我難以置信的懶惰我解決了這個利用CSS3背景大小的規則...

background-size: 40px;

這樣做固定了一切，我想。 :)

來源

2014-06-24 00:20:05 JaredCubilla

如前所述通過@showdev

它正常工作，這裏是演示：

http://jsfiddle.net/jLNrv

確保您的文件路徑是正確的！

這裏是文件路徑的簡要說明：

./意味着當前目錄

/是根目錄

myfile.text位於當前目錄中，正如./myfile.text

../myfile.text比你高一級，/myfile.text住在你的根目錄下。

來源

2014-06-23 23:44:43 imbondbaby

我瞭解文件路徑如何工作，並且我發現圖片_was_鏈接正確... Chrome開發工具沒有顯示任何錯誤，我可以通過點擊開發工具中顯示的鏈接訪問我的圖像... – JaredCubilla

您能否提供演示鏈接？ – imbondbaby

要回答你關於你更新的問題的問題...沒有文件大小不應該因爲你聲明瞭新的高度和寬度...這是一個使用巨大圖像的演示http://jsfiddle.net/jLNrv/1 / – imbondbaby

CSS：背景圖像顯示不出來

回答

相關問題