Html CSS 背景图像问题（图像未显示）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5661683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue with CSS background image (Image not Showing)
提问by Satch3000
I am having a problem with a background image not showing.
我遇到了背景图像未显示的问题。
I have a class that I've added to an anchor tag.
我有一个已添加到锚标记的类。
<a class="my-class"></a>
and the css for the class is:
该类的 css 是：
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center
}
The problem is that the background image is not showing.
问题是背景图像没有显示。
I know it's there because when I do this:
我知道它在那里，因为当我这样做时：
<a class="my-class">&NBSP;</a>
part of the image shows.
部分图像显示。
Anyone have any idea on how to make the whole image show without having to insert lots of 's please?
任何人都知道如何使整个图像显示而不必插入很多 's 吗？
回答by pconcepcion
<a>tag is an inlineelement and without a content will not show the background, so You need to make it displayas a blockor inline-blockelement and then define the sizeof the element.
<a>tag 是一个内联元素，没有内容不会显示背景，所以你需要把它display做成一个blockorinline-block元素，然后定义元素的大小。
Try with:
尝试：
.my-class {
display: block;
width: 128px;
height: 128px;
background: transparent url("../images/my-bg-image.png") no-repeat 0 center
}
For more information you can check the box modeland the display propertyon the CSS 2.1 w3c standard.
欲了解更多信息，您可以检查框模型和显示性能上的CSS 2.1 W3C标准。
Also the sections The width propertyand Computing widths and marginshave an explanation of why the element doesn't show the background on an empty inline element.
此外，宽度属性和计算宽度和边距部分解释了为什么元素不在空的内联元素上显示背景。
Update:
更新：
Also the working draftof the CSS Box Modelis availableon the W3C site.
此外，W3C 站点上还提供了CSS 盒模型的工作草案。
Update 2:
更新 2：
On a side note, relying only on a css background image for a link can have somme accessibility issues.
附带说明一下，仅依靠 css 背景图像作为链接可能会出现一些可访问性问题。
回答by Marc G?rtz
The element has a zero-width because it has no content at all. If the image contains useful information (and it really should, it is used as a link!), you should put some text inside the link and use any image replacement technique you like, for example:
该元素的宽度为零，因为它根本没有内容。如果图像包含有用的信息（它确实应该用作链接！），您应该在链接中放置一些文本并使用您喜欢的任何图像替换技术，例如：
HTML:
HTML：
<a class="my-class">It‘s awesome!</a>
CSS:
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 */
}
回答by shanethehat
You need to assign a width to your anchor. Inline elements have no width if they have no content.
您需要为锚点指定宽度。如果内联元素没有内容，则它们没有宽度。
.my-class {
background:transparent url("../images/my-bg-image.png") no-repeat 0 center;
width:20px;
height:20px;
display:inline-block;
}
Edit:and it seems without any content at all it is also necessary to set a height and display:inline-block. This causes the element to think of itself internally as a block element, but act externally as inline.
编辑：似乎根本没有任何内容，还需要设置高度和display:inline-block. 这导致元素在内部认为自己是块元素，但在外部作为内联。
