Question

图片未显示在我的页面中。

<div class="rating" style="width:25%;float:right;height:100px">
       <span class="truckIcon">
       <!-- <img src="../images/logo/favicon.png">
       </span> -->
</div>

的CSS：

.truckIcon{
    background-image: url(../images/icons/favicon.png);no-repeat !important;
    width:80px;
    height:80px;
}

这是我的css路径：\ulmt\html\css\style.css
这是我的图片路径：\ulmt\html\images\icons\favicon.png

这里有什么问题吗？

Answer 1

.truckIcon是line-element，因此您需要为此添加display:inline-block，而background-image不能使用no-repeat，因此您需要添加{{} 1}}

background-repeat: no-repeat !important;

Answer 2

在不重复之前删除分号。风格应该是

.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
    width:80px;
    height:80px;
}

Answer 3

从CSS中的图片网址;之前删除分号 no-repeat ，例如：

.truckIcon {
  background-image: url(../images/icons/favicon.png) no-repeat !important;
  width:80px;
  height:80px;
}

希望这有帮助！

Answer 4

span是一个内联元素。所以你需要样式显示：块;或显示：inline-block; 也可以在img标记

之后取消注释你的近距离标记

.truckIcon{
    background-image: url(../images/icons/favicon.png)no-repeat !important;
    width:80px;
    height:80px;
    display:inline-block;
}

Answer 5

background-image不支持no-repeat所以试试这个：

 .truckIcon{
    background: url(../images/icons/favicon.png) no-repeat !important;
    width:80px;
    height:80px;
}

Answer 6

您使用的是span元素，它是一个内联元素。所以你的宽度和高度不适用于它。为了使其工作，添加一个名为display：inline-block;

的属性

.truckIcon{background-image: url(../images/icons/favicon.png)no-repeat !important;
    width:80px;
    height:80px;
    display: inline-block;
}

Answer 7

只需简单地更改此CSS就可以正常工作。

＆＃13;

.truckIcon{background-image: url(../images/icons/favicon.png) no-repeat !important;
width:80px;
height:80px;
display:inlin-block;
}

＆＃13;

背景图片未加载

7 个答案: