html - 无法用等效的 css 正确替换 img

Question

我不想<img>用于按钮图标、错误提示等

目前，我有这个标记来呈现错误消息：

<p>
    <img src="/path/to/error.jpg" />An error occurred 1
</p>

<p>
    <img src="/path/to/error.jpg" />An error occurred 2
</p>

它呈现，如（伪视图）

[img] An error occured 1
[img] An error occured 2

它完全按照我想要的方式工作，但问题是<img>标签，我根本不想使用它。

因此，我尝试将img标签替换为，

<style>
    #error {
        background-image  : url(../images/error.jpg);
        background-repeat : no-repeat;
        width             : 130px;
        height            : 30px;
    }
</style>

<p>
    <div id="#error"></div>An error occured 1
</p>

<p>
    <div id="#error"></div>An error occured 2
</p>

但它呈现，就像

[img] 
 An error occured 1
[img] 
 An error occured 2

我也试过玩它的widthand height, added left，但没有运气。

再次 -问题是，

[img] 
 An error occured 

#error它以上述样式呈现这种方式。

问题，

我希望这个带有#errorcss 定义，没有img标签像这样呈现，

[img] An error occured 

我还应该添加什么？

Answer 1

你可以玩background-position财产。这是相同的示例

#error {
    background: url(../images/error.jpg) top left no-repeat;
    width: 130px;
    height: 30px;
    padding-left: (width of image);
}

和标记将是

<div id="#error">An error occured 1</div>

Js Fiddle Demo