css - 不显示背景图像的元素

Question

我正在尝试为“a”元素添加背景图像，但它只会显示图像的一部分(因此，如果我将 Home 作为值，那么无论 home 占用多少空间，它就是图像的显示，如果该值为空，它不会显示图像的任何内容)。

尽管我已经设置了要显示的“a”元素的宽度和高度。

谁能帮帮我？

代码。

<div style="width:1200px;height:25px;text-align:left;">
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
<a href="#" style="background-image:url('Images2/Heading/TopMenu.gif');width:176px;height:25px;margin-left:8px;margin-right:8px;">&#160;</a>
</div>

我确定这很愚蠢，但我不知道是什么。

Answer 1

<a>是一个内联元素。内联元素不能设置宽度和高度。

因此您需要使用 CSS 属性 display 更改元素的显示模式.

使用 display: block;如果您希望将元素从文本流中取出并视为一个 block (即:垂直堆叠，每行一个 block )。

使用 display: inline-block;如果您希望您的元素在位置上表现得像内联元素，但具有类似 block 的属性。

注意: inline-block在 <a> 上受 IE6 支持.在 IE6 中，inline-block仅在具有 inline 的元素上支持显示样式默认样式。