CSS背景-IMG不加載到DIV

我有CSS與圖像CSS背景-IMG不加載到DIV

.backgroundImg { 
    background: url('./path/file.gif'); 
    background-repeat: no repeat; 
    width: 24px; 
    height: 24px; 
} 

.ui-highlight { 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
}

我有進口這類

<div class="ui-highlight ui-corner-all"> 
    <div class="backgroundImg" style="float:left;"> 
     some text......... 
    </div> 
</div>

編輯

我div標籤我試圖實現一個邊框，左邊是圖像，右邊是文字。我檢查了元素，當我將鼠標懸停在ui-highlight類上時，圖像顯示出來了。我知道css，老實說我不是專業人員。有人能幫助我，爲什麼圖像不顯示

UPDATE

增加寬度和高度與backgroundImg類的圖像是可見後。

來源

2012-08-07 user525146

我會做的第一件事就是用螢火蟲爲Firefox或開發工具在WebKit瀏覽器來檢查您的情況。在

右鍵單擊「一些文本......」，然後選擇檢查元素。
在HTML檢查器中點擊class爲「backgroundImg」的div
在右側，您應該看到此元素的CSS檢查器。將鼠標懸停在('./path/file.gif')上，查看圖像縮略圖是否加載。如果沒有，您可能會錯誤地設置路徑。
將鼠標懸停在HTML檢查器的div上，看看它在頁面上的亮點。這可能是因爲你的div沒有佔用足夠的空間來顯示圖像。如果是這種情況，您需要設置一個寬度/高度或在div中添加更多內容以填充它。
父div（ui-highlight ui-corner-all）上的jQuery UI類可能會設置一些遮擋子div中圖像的樣式。請確保使用HTML/CSS檢查器檢查此項。

來源

2012-08-07 21:42:38

我檢查了元素，當我將鼠標懸停在CSS類ui-highlight上時，圖像加載完畢。圖像大小爲24x24px。 – user525146 2012-08-07 21:46:21

**當您將鼠標懸停在類** backgroundImg **的div上時，您的**圖片應該加載完畢。圖像可能會從** ui-highlight **加載，但這可能是jQuery UI附帶的圖像。 – 2012-08-07 21:49:38

抱歉，我的意思是說backgroundImg類。由於某些原因，當我在螢火蟲中看到div類時，它透明，這意味着它由於某種原因而被隱藏起來。 – user525146 2012-08-07 21:55:38

嘗試使用絕對路徑：

background: url('/path/from/root/file.gif')

或者：

background: url('http://example.com/path/from/root/file.gif')

這確保了沒有歧義，以在圖像的來源。

來源

2012-08-07 21:40:32

首先，我會建議你應用某種clearfix。簡單的方法是將overflow:hidden;添加到您的.ui-highlight。這是要求包裝的高度。 D做一些關於clearfix的搜索方式和原因。

第二個將檢查圖像是否實際上正在加載，您的路徑可能是錯誤的。在Chrome的代碼檢查器中檢查它將是我的方式。

來源

2012-08-07 21:40:48 Pevara

沒有什麼語法與您的CSS，這導致我相信圖像不是你在CSS中指定的地方。嘗試絕對URL或相對於CSS文件本身的路徑。

但是：雖然我不確定你會得到你想要的結果。如果你嘗試改變

background: url('./path/file.gif');

到

background: #f00;

你可以預覽你要當你的圖像URL摸索出得到什麼。

既然你說你正在試圖獲得「與左邊和文字上的圖像的右側圖像的邊界框」，你可以嘗試這樣的事：

CSS：

.ui-highlight { 
    background: url('http://www.site.com/file.gif') top left no-repeat; 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
    padding-left: 90px; /* This should be the width of the background image */ 
}

HTML：

<div class="ui-highlight"> 
    some text......... 
</div>

這將繪製邊框div周圍，背景圖像添加到div的左上角，然後寫的文字到IMA權GE。

來源

2012-08-07 21:46:29 Jason

你試圖從你的代碼中做的是給文本背景的圖像。它有效，但不符合你的意圖。將backgroundImg div替換爲HTML中的標籤，並使用「align ='top'」元素。我得到的代碼是：

<html> 
<head> 
<style type="text/css"> 

.ui-highlight { 
    border: 2px solid green; 
    color: #363636; 
    padding: 0.7em; 
} 
</style> 
</head> 
<body> 
<div class="ui-highlight"> 
    <img src="path/img.gif" style="padding:0px;" align="top"> 
     some text......... 
    </br> 
</div> 
</body> 
</html>

來源

2012-08-07 22:03:06 InvisibleUp

CSS背景-IMG不加載到DIV

回答

相關問題