关于背景图片,有些时候它可以正常地显示出来,但是有时候它却不可以,那究竟是什么原因呢?今天
我就是碰到了这个问题。
解决这个问题之前我们首先应该知道块级元素和行内元素,块级元素一般来说是可以设置宽和高的以及
其他的属性等等,但是行内元素是不可以设置宽高等属性的。块级元素和行内元素师取决于元素的类型
,每一个元素都有自己的默认的类型。
接下来我们给出代码:<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)。
然后图片就可以显示出来啦~
我就是碰到了这个问题。
解决这个问题之前我们首先应该知道块级元素和行内元素,块级元素一般来说是可以设置宽和高的以及
其他的属性等等,但是行内元素是不可以设置宽高等属性的。块级元素和行内元素师取决于元素的类型
,每一个元素都有自己的默认的类型。
接下来我们给出代码:<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)。
然后图片就可以显示出来啦~