背景图像未显示在< a>中.标签 [英] Background image does not show in <a> tag

问题描述

我使用引导程序3.我尝试通过使用标签< a> 来使用图标链接"，如下所示:

I use bootstrap 3. I try to use "icon link" by using tag <a> as shown below:

HTML:
<a href="#" class="link"></a>

CSS:
.link {
    background-image: url(img/icon.png);
}

重要的是，我的样式表在主文件夹"中，即在文件夹中，其中是带有 icon.png 文件的 img 文件夹.因此，似乎网址不正确.

It is important to say, that my stylesheet is in "main folder", that is in folder, where is a img folder with icon.png file. So it seems wrong url is not the case.

我不知道为什么图片没有显示.

I can't figure out why image is not showing.

推荐答案

anchor元素没有内容，并且没有样式会影响其尺寸，因此有效面积为零平方像素.

The anchor element has no content, and it has no styles that would affect it's dimensions, consequently it has an effective area of zero square pixels.

应用背景图像可能很好，您看不到它，因为没有可以显示背景的区域.

The background image is probably being applied just fine, you can't see it because there is no area on which it can be displayed.

该代码意味着该图像在那里告诉访问者链接的位置，这意味着该图像是 content 而不是 background ，应表示为图片元素(会自动占据图片文件的尺寸).

The code implies that the image is there to tell the visitor where the link goes, that would mean that the image is content and not background and should be expressed as an image element (which would take on the dimensions of the image file automatically).

使用图像元素还使您有机会提供替代文本，以使屏幕阅读器/搜索引擎/Internet用户在加载图像时短暂掉下来等.

Using an image element also provides you with the opportunity to supply alt text for the benefit of screen readers / search engines / people with internet connections that briefly fell over while loading the image / etc.

<a href="#"><img src="img/icon.png" alt="top of page"></a>

这篇关于背景图像未显示在< a>中.标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！