css - 从css调用图像的正确方法

Question

新手，求帮助。

我正在尝试从 css 调用图像。这是正确的做法吗？

<span class="mapicon">blah blah blah</span> 

使用上述方法，我无法正确地将图像与我的文本对齐。

<span class="mapicon"></span>blah blah blah

这对我有用，但这是这样做的方法吗？

我的 CSS

.mapicon {
background-image: url('http://site.com/wp-content/uploads/2013/07/map_icon.gif');
background-repeat: no-repeat;
padding-left: 15px;
vertical-align: middle;

}

Answer 1

我应该通过下一条路去；

HTML

<p><span class="mapicon">&nbsp;</span>blah blah blah</p>

您将文本包装在一个段落中，并且您可以通过 css 将 span.mapicon 中的内容替换为图像。

然后是css代码，

.mapicon {
    background-image: url('http://site.com/wp-content/uploads/2013/07/map_icon.gif');
    background-repeat: no-repeat;
    display: inline-block;
    /* image width and height */
    width: 50px;
    height: 50px;
}

我希望这对你有所帮助