不显示背景图像的元素 [英] a element not showing background image

问题描述

我想为一个a元素添加一个后台图像，但它只会显示图像的一部分（所以如果我有家庭作为值，无论空间家庭采取的是什么是图像的显示，如果该值为空，它不会显示任何图像）。

尽管我已经设置了要显示的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- 8px;>&＃160;< / a> 
< a href =＃style =background-image：url（'Images2 / Heading / TopMenu.gif'）; width：176px; height：25px; margin-left：8px; margin- 8px;>&＃160;< / a> 
< a href =＃style =background-image：url（'Images2 / Heading / TopMenu.gif'）; width：176px; height：25px; margin-left：8px; margin- 8px;>&＃160;< / a> 
< a href =＃style =background-image：url（'Images2 / Heading / TopMenu.gif'）; width：176px; height：25px; margin-left：8px; margin- 8px;>&＃160;< / a> 
< a href =＃style =background-image：url（'Images2 / Heading / TopMenu.gif'）; width：176px; height：25px; margin-left：8px; margin- 8px;>&＃160;< / a> 
< / div> 
  

我相信是愚蠢的，但我找不出什么。

解决方案

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

因此，您需要使用CSS属性 display 更改元素的显示模式c $ c>。

如果您希望从流中移除元素，请使用 display：block;

使用 display：inline-block; 如果你想你的元素的行为像一个内联元素位置明智但具有块样的属性。

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

I am trying to add a backgroung image for a "a" element, but it would only show part of the image ( so if I have Home as value, whatever space home takes that is what is shows of the image, if the value is empty it wont show anything of the image).

Despite I have setted up the width and height of the "a" element to display.

Can anybody help me?

Code.

<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>

I am sure is something silly, but I cant find out what.

解决方案

<a> is an inline element. Inline elements cannot have a set width and height.

You therefore need to change the display mode of the element using the CSS property display.

Use display: block; if you want your elements to be taken out of the flow of text and considered a block (ie.: stacked vertically, one block per line).

Use display: inline-block; if you want your element to behave like an inline element position wise but have block-like properties.

Note: inline-block is supported by IE6 on <a>. In IE6, inline-block display style is only supported on elements which has an inline default style.

这篇关于不显示背景图像的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！