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>

图像的一部分显示。

任何人都知道如何在不插入大量 的情况下制作整个图像？

Answer 1

<a>标记是内嵌元素，没有内容不会显示背景，因此您需要将其display设为block或{ {1}}元素，然后定义元素的大小。

尝试：

inline-block

有关详情，请查看box model上的display property和CSS 2.1 w3c standard。

此外，The width property和Computing widths and margins部分还解释了为什么元素不会在空内联元素上显示背景。

<强>更新

W3C网站上 CSS Box模型的工作草案也是available。

更新2：

另一方面，仅依靠css背景图片获取链接可能会出现somme 辅助功能问题。

Answer 2

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

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

Answer 3

您需要为锚点指定宽度。如果内联元素没有内容，则它们没有宽度。

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

编辑，似乎没有任何内容，也需要设置高度和display:inline-block。这会导致元素在内部将其自身视为块元素，但在外部作为内联行为。

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

3 个答案: