More than 5 years have passed since last update.

CSSスプライトのやり方と、_線が入る問題対応

Last updated at 2014-09-29Posted at 2014-09-29

CSSスプライト用の画像を準備。

default.png

表示例

index.html

<style>
a.sprite {
        line-height:45px;
        display:block;
        background:url(default.png) no-repeat top left;
}
a.sprite:hover {
        background-position: bottom left;
}
a.ok {
        text-decoration:none;
}
</style>

<p>画像が表示されない例</p>
  <a href="#" class="sprite sample1"></a>

<p>画像が表示されるが、画像に_が入る</p>
  <a href="#" class="sprite sample2">&nbsp;</a>

<p>期待どおりに表示</p>
  <a href="#" class="sprite sample3 ok">&nbsp;</a>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up