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

我还尝试玩width和height，添加了left，但没有运气。

再次 - 问题就是那个，

[img] 
 An error occured

以前面提到的#error样式呈现这种方式。

问题，

我想要#error css definiton，没有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

无法正确替换img与其css等效

1 个答案: