0

これらの種類のリンクの多くを含む次のHTMLがあります。

<a class="button" id="menu">
   <img width="16" height="16" src="/Images/control-double.png">
</a>

を使用してすべての画像を組み合わせて、これらのスプライトを作成しました

spritegen

しかし、これを見ると、例を示しているので、背景のためだけのようです。

.sprite-control-double{ background-position: 0 -396px; width: 16px; height: 16px; } 
#container li {
    background: url(csg-4febd28fe3aa3.png) no-repeat top left;
}

単一の画像ではなく、画像のポジショニングでスプライトを使用するにはどうすればよいですか？

4

3 に答える 3

3

「スプライト」手法を使用する場合はIMG、アンカー内に要素は必要ありません。

a.button {
    background-color: transparent;
    background-image: url(/Images/control-double.png);
    background-position: 0 -396px;
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
}

background-color一部のブラウザでは、背景色がない場合、レンダリングエンジンが背景画像を表示しないため、スタイルを追加しました。

于 2012-06-28T04:06:31.517 に答える
0

はい、できます。これがスプライトの仕組みです。スプライトは、オーバーフローが非表示に設定された要素の背景として適用されます。

タグを完全に削除し、<img>タグの背景に依存する必要があり<a>ます。スプライトの目的は、非セマンティック<img>タグの必要性を置き換えることです。

于 2012-06-28T03:53:59.257 に答える
0

これはすべて、spritegensヘルプページからリンクされている記事でかなりよくカバーされています：http：//www.alistapart.com/articles/sprites

于 2012-06-28T04:03:42.967 に答える