Background image does not show in <a> tag

问题

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.

回答1:

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.

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

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>

回答2:

Because your <a href="#" class="link"></a> is empty.

You need to give it a size :

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

回答3:

You have to make the tag enought big to show the image Example: CSS:

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

来源：https://stackoverflow.com/questions/33762453/background-image-does-not-show-in-a-tag