☰

背景画像がspanタグに表示されない 質問する

tag-icon • tag-icon html css
背景画像がspanタグに表示されない 質問する

Windows 7 の最新の FF で背景画像を表示する span タグに問題があります。以前の FF、Chrome、Safari、IE では正常に動作し、すべて表示されるようですが、ハンドヘルド デバイスと Windows 7 では失敗するようです。

あいまいに思われたら申し訳ありませんが、私には理解できません。画像は元々高さが指定されていない png でしたが、その後 gif にして高さを適用しました。

<span class="design">Design Viz</span>
<style>
.design  {
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    padding-left:25px;
}
</style>

ベストアンサー1

background-image CSS プロパティは、背景として画像を配置するだけです。オブジェクトの幅と高さは、常に CSS/インライン スタイルによる静的設定、またはオブジェクト内に表示されるコンテンツの実際のサイズによって定義されます。あなたの場合、タグ間にコンテンツを追加していないため、その x/y 寸法は 0 になりますが、背景にバグはありません。背景にはありますが、要素のサイズを (何らかの方法で) 定義しない限り、表示されません。

<span class="design">Design Viz</span>
.design  {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}

ここで、50 は、あなたのケースに適した任意の値になります。

おすすめ記事