1

私は非常に基本的なリンクを持っているスプライト画像を使用しようとしています

<td align="center">
    <img alt="my alt text" src="/Assets/t/myImage.gif" />
</td>

これを変更して、srcの代わりにスプライトで画像を使用するようにしようと、しばらく苦労しています

4

2 に答える 2

0

スプライト画像を使用した簡単な例を次に示します。

基本的な考え方は、固定サイズの要素で背景画像を使用することです (この例では、a幅/高さが 20px のタグです)。次に、background-position必要なスプライトを選択するために使用して画像を配置します。:hoverセレクターは、マウスオーバー時にさらに別のスプライトを選択するために使用されます。通常、1 つの画像とは異なるスプライトを使用して複数のリンクを作成します。

CSS:

a.sprite_button
{
    background-image:url(toolbar.png);
    width:20px;
    height:20px;
    display:inline-block;
}
a#button1         { background-position:0px 0px; }
a#button1:hover   { background-position:0px 20px; }

html:

<a href="blah" class="sprite_button" id="button1"></a>
于 2010-09-10T12:12:20.007 に答える
0

スプライトは複数のグラフィックを含む大きな画像で、CSS で背景画像として使用されます。これらは、幅と高さを使用して CSS でサイズ調整されたブロック要素の背景として配置されます。次に、background-position を使用して、背景画像をあるべき場所に配置します。画像はそれらの座標と要素のサイズに従ってトリミングされ、残りは無視されます (他の要素の背景に使用されます)。

たとえば、通常の状態、マウスをホバーした状態、およびアクティブな状態 (押された状態) を持つきれいなボタンがあります。3 つの画像すべてを 1 つの画像ファイルに上下に配置するだけです。

button  {display: block; width: 100px; height: 50px; background-image: url(yourImage.png); background-repeat: no-repeat; background-position: 0 0;}
button:HOVER {background-position: 0 -50px;}
button.active {background-position: 0 -100px;}

これにより、状態が変更されたときに新しい背景画像をロードする必要があり、その間に醜いボタンが0.5秒間残るという状況も解消されます。

于 2010-09-10T12:15:45.910 に答える