Question

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);
}

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.

Answer 1

锚元素没有内容，它没有影响它的尺寸的样式，因此它的有效面积为零平方像素。

背景图片可能正在应用得很好，你看不到它，因为它没有可以显示的区域。

代码暗示图像是告诉访问者链接的去向，这意味着图像是内容而不是背景，应该表示为图像元素（将自动采用图像文件的尺寸）。

使用图像元素还为您提供了提供替代文字的机会，以便屏幕阅读器/搜索引擎/具有互联网连接的人员在加载图像等时暂时失败。

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

Answer 2

因为<a href="#" class="link"></a>为空。

你需要给它一个大小：

.link {
    background-image: url(img/icon.png);
    height:100px;
    width:100px;
    display:block;
}

Answer 3

你必须使标签看起来很大才能显示图像例： CSS：

.link {
  background-image: url(img/icon.png);
  display: block;
  width: 100px;
  height: 100px;
}

背景图片未显示在<a> tag

3 个答案: