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タグを次のように置き換えてみました。

<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また、そのand height、 addedで遊んでみましleftたが、うまくいきませんでした。

繰り返しますが、問題は、

[img] 
 An error occured

#error前述のスタイルでこのようにレンダリングされます。

質問は、

このようにタグをレンダリング#errorせずに、css定義でこれが欲しいのですが、img

[img] An error occured

他に何を追加すればよいですか?

4

1 に答える 1

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

于 2013-10-08T10:29:56.490 に答える