Не могу правильно заменить img его эквивалентом CSS

Question

Не могу правильно заменить img его эквивалентом CSS

0

Я не хочу использовать <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 tag,

<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

Что еще я должен добавить?

Yang 08 окт. 2013, в 13:00

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Sachin · Accepted Answer · 2013-10-08T07-59-00.000Z

Вы можете играть с свойством 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