html - スパンの背景画像は、スパン タグにテキストがないと表示されません

Question

内側のテキスト xxx を削除すると、下のスパンは背景画像になりません

<span style='background-image:url("http://gifsoup.com/web/images/soc4.gif")'  style="height: 30px;">
 xxx
</span>

ただし、互換モードでは xxx がなくても機能します。

内部テキストなしで機能させるにはどうすればよいですか?

Answer 1

スパンは、幅も高さも持たないインライン要素にデフォルトで設定されるためです。CSS を次のように変更します。

span {
    display:inline-block;
    width:30px;
    background-image:url("http://gifsoup.com/web/images/soc4.gif");
    height:30px;
}

jsFiddle の例

表示をインラインからインラインブロックに変更することで、スパンの幅と高さを設定できます。

Answer 2

span 要素はインライン要素であるため、幅も高さもありません。要素 css でブロックまたはインライン ブロックとして表示するように指定し、画像の幅と高さを指定する必要があります。

span{
    display: inline-block;
    background-image:url("http://gifsoup.com/web/images/soc4.gif");
    width:30px;
    height:30px;
    border-radius: 5px;
}

例