css --关于背景图片显示不出来的情况

关于背景图片，有些时候它可以正常地显示出来，但是有时候它却不可以，那究竟是什么原因呢？今天

我就是碰到了这个问题。

解决这个问题之前我们首先应该知道块级元素和行内元素，块级元素一般来说是可以设置宽和高的以及

其他的属性等等，但是行内元素是不可以设置宽高等属性的。块级元素和行内元素师取决于元素的类型

，每一个元素都有自己的默认的类型。

接下来我们给出代码：<a href="#"><i class="icon-gome-plus-logo"></i>看这里</a>

<style>

.icon-gome-plus-logo{

    background-image:url(ui.png);

    background-repeat:no-repeat;

    background-position:0px -1361px;

    width:16px;

    height:16px;

    margin-right:5px;

}

</style>

这样子运行的代码是没有图片的显示的，因为i这个元素它是行内元素的，即使你给它设置了宽高，也是

没有作用到该元素上的，而且<i>中没有内容，行内元素的大小是取决于内容的大小的，但是在这里却没

有任何的内容，也就是说该元素的大小为0，背景图片也就显示不出来了。

那我们应该怎么办呢？我们的目的就是想让元素有宽度和高度的设置，然后可以让背景图片显示出来，

这个时候我们可以在以上的css样式中添加display这个属性。你可以设置为inline-block(行内块级元素

）,或者直接设置为块级元素（block)。

然后图片就可以显示出来啦~