html - CSS 背景图像问题(图像未显示)

Question

我遇到了背景图片未显示的问题。

我有一个已添加到 anchor 标记的类。

<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>标签是一个 inline 元素，没有内容不会显示背景，所以你需要把它做成 display作为block或 inline-block元素，然后定义元素的大小。

尝试:

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

有关更多信息，您可以查看 box model和 display property在 CSS 2.1 w3c standard 上.

还有章节 The width property和 Computing widths and margins解释为什么该元素不在空内联元素上显示背景。

更新:

此外，CSS 盒模型 的工作草案 是available在 W3C 网站上。

更新 2:

附带说明一下，仅依赖 css 背景图像的链接可能会有一些可访问性问题。