问题与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背景图像（图像不显示）

回答

相关问题