問題與CSS背景圖像（圖像不顯示）

我有一個我添加到錨標籤的類。

<a class="my-class"></a>

以及類的CSS是：

.my-class { 
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center 
}

的問題是，背景圖像沒有顯示。

我知道它的存在，因爲當我這樣做：圖像顯示的

<a class="my-class">&NBSP;</a>

一部分。

任何人有任何想法如何使整個圖像顯示，而不必插入大量 的請？

來源

2011-04-14 Satch3000

<a>標籤是內嵌元素，沒有內容將不顯示背景，所以你需要使它display爲block或inline-block元素，然後定義元素的大小。

嘗試用：

欲瞭解更多信息，您可以檢查box model並在CSS 2.1 w3c standard的display property。

另外，部分The width property和Computing widths and margins有爲什麼元素不會顯示一個空的內聯元素的背景解釋。

更新說明：CSS盒模型的

另外，工作草案是available在W3C網站。

更新2：

在一個側面說明，只有一個CSS背景圖像上依靠一個鏈接可以有索姆可訪問性問題。

來源

2011-04-14 10:21:10 pconcepcion

你也可以使用'min-width：<插入圖像寬度here>;'如果你想讓大小變得靈活。 – starbeamrainbowlabs 2013-05-13 11:02:40

@starbeamrainbowlabs，是的，但我只是在想，這裏的根本問題是關於**瞭解box模型**的工作原理以及'inline'，'block'和'inline-block'元素之間的區別:) – pconcepcion 2013-05-13 11:10:54

您需要爲錨點分配一個寬度。內聯元素沒有寬度，如果他們沒有內容。

.my-class { 
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center; 
    width:20px; 
    height:20px; 
    display:inline-block; 
}

編輯：，似乎沒有任何內容可言，還必須設置高度和display:inline-block。這會導致元素在內部將其視爲塊元素，但是會以內聯方式在外部進行操作。

來源

2011-04-14 10:14:27 shanethehat

我想：。我級{background image：transparent url（「../ images/my-bg-image.png」）no-repeat 0 center;寬度：20像素;高度：20像素; }但沒有改變。 – Satch3000 2011-04-14 10:16:02

對不起，修改。 – shanethehat 2011-04-14 10:22:23

該元素具有零寬度，因爲它根本沒有內容。如果圖像包含有用的信息（它確實應該，它被用作鏈接！），你應該把一些文字鏈接內使用任何你喜歡的圖片替換技術，例如：

HTML：

<a class="my-class">It‘s awesome!</a>

CSS：

.my-class { 
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center; 
    display: inline-block; /* create a block element behaving like an inline element */ 
    text-indent: -1000em; /* move the inner text outside of the link */ 
    overflow: hidden; /* prevent text visibility */ 
    width: 200px; /* image width */ 
    height: 16px; /* image height */ 
}

來源

2011-04-14 10:21:25 Dreamseer

問題與CSS背景圖像（圖像不顯示）

回答

相關問題