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>

图片的一部分显示。 任何人都对如何显示整个图像有任何想法，而不必插入很多

 

\。     

解决方法

<a>

标记是一个内联元素，没有内容将不会显示背景，因此需要将

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 Model的工作草案。 更新2： 附带说明一下，仅依靠CSS背景图像进行链接可能会带来一些可访问性问题。     ,该元素的宽度为零，因为它根本没有内容。如果图像包含有用的信息（它确实应该用作链接！），则应在链接内放置一些文本，并使用喜欢的任何图像替换技术，例如： 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 */
}

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

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

编辑：似乎完全没有任何内容，也有必要设置高度和

display:inline-block

。这使元素在内部将自身视为一个块元素，而在外部则作为内联。