CSS背景图片问题（图片未显示）

Question

我遇到了一个背景图片不显示的问题。

我给一个锚点标签添加了一个类。

<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>

图片的部分内容显示。

有没有想法可以使整张图片显示，而不需要插入大量的 ？

- Satch3000

Answer 1

<a>标签是一个内联元素，如果没有内容，则不会显示背景色，因此您需要将其设置为display块级元素或inline-block元素，然后定义元素的大小。

尝试一下：

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

想要了解更多信息，可以查看盒子模型和显示属性在CSS 2.1 w3c标准上的说明。

此外，宽度属性和计算宽度和边距这两个章节详细解释了为什么空内联元素不显示背景。

更新：

此外，CSS盒子模型的工作草案可以在W3C网站上获取。

更新2：

顺便提一下，只依赖于CSS背景图像的链接可能存在一些可访问性问题。

- pconcepcion

---

如果您想要图像大小具有弹性，也可以使用 min-width： <插入图像宽度>;。 - starbeamrainbowlabs

@starbeamrainbowlabs，是的，但我只是在思考根本问题是关于如何理解盒模型以及inline、block和inline-block元素之间的区别 :) - pconcepcion

Answer 2

您需要为锚点分配一个宽度。如果内联元素没有内容，它们就没有宽度。

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

编辑：似乎即使没有任何内容，设置高度和display:inline-block也是必要的。这会导致元素在内部将自己视为块级元素，但在外部表现为行内元素。

- shanethehat

---

我尝试了以下代码：.my-class { background:transparent url("../images/my-bg-image.png") no-repeat 0 center; width:20px; height:20px; } 但是没有任何变化。 - Satch3000

Answer 3

该元素宽度为零，因为它没有任何内容。如果图像包含有用信息（并且确实应该有，因为它被用作链接！），您应该在链接内放置一些文本，并使用您喜欢的任何图像替换技术，例如：

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 */
}

- mrcgrtz