css - テキストなしのCSS背景画像？

Question

シンプルな情報アイコンがあり、cssの背景画像として表示したいと思います。これは私が試したものです：

span.info {
    background-image: url(info.png);
    float: right;
    width: 17px;
    display: block;
}

これが私がそれを使う方法です：

<span class="info"></span>

画像は表示されません。私はこのようないくつかのテキストを持っている必要があります：

<span class="info">test</span>

これはテキスト付きの画像を表示しますが、テキストなしで画像だけが必要です。どうしたの？

ありがとう！

score 9 · Accepted Answer

スタイルに高さを設定する必要があります。

span.info {
    background-image: url(info.png);
    float: right;
    width: 17px;
    height: 17px;
    display: block;
}

score 2 · Accepted Answer

画像のみが必要な場合は、<img>直接使用しないでください。これにより、画像をより細かく制御できます。

しかし、次のようにスパンの背景画像を持つことができます。

<span>のようなブロック要素ではありません<div>。したがって、そのを設定する必要があります"display: block"。次に、スパンの高さと幅を指定します。

score 2 · Accepted Answer

（これは必須です）でもdisplay:block、スパンの高さを指定する必要があります。

score 1 · Accepted Answer

CSS で高さ (および幅) を指定しない限り、コンテンツがなければスパンには何も表示されません...

span.info {
    height: 17px;
    ...
}

score 0 · Accepted Answer

0

これはうまくいくはずです：
<span class="info"> </span>

于 2012-08-06T10:48:03.487 に答える

5 に答える 5