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>

部分图像显示.

任何人都知道如何使整个图像显示而不必插入很多 的请？

Answer 1

<a>tag是内联元素,没有内容将不显示背景,因此您需要将其display作为元素block或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标准上的框模型和显示属性.

此外,"宽度"属性和" 计算宽度"和"边距"部分还说明了元素在空内联元素上不显示背景的原因.

更新:

此外,W3C网站上还提供了CSS Box模型的工作草案.

更新2:

另一方面,仅依赖于css背景图像的链接可能会有somme 可访问性问题.

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。这导致该元素在内部将自己视为块元素，但在外部表现为内联元素。

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