HTMLでスプライトイメージを使用する正しい方法は何ですか？

Question

いくつかのスクリーンリーダーではアイコンの存在を示す必要があり、IMGタグをIまたは普通のDIVよりも好むので、アイコンイメージ要素をHTMLで表示する必要があるという要件があるとします。

sprite.pngとempty.pngの画像があります。空のブランク画像を作成するために使用されます（スプライト画像は要素の背景であるため表示されます）。 CSSで

我々はクラス

.icon { 
    background:url('sprite.png') 0px 0px; 
    width:20px; 
    height:20px; 
} 

はその後、我々はこのように私たちのHTMLにこれを使用する必要があり：

<img src="empty.png" class="icon" alt="Image from Sprite is Shown" /> 

我々は、画像のように私たちの「sprite.png」を使用して、それを他の方法で行うことができますcssでimg上のマスク/クリッププロパティを設定したソース？

ありがとうございます。

Answer 1

background-imageは、後ろにある0pxパラメータを使用しません。あなたはそれをbackgroundと混ぜているかもしれません。

スプライト画像の正しい部分を表示するには、background-positionを使用して画像の正しい部分を選択します。

は簡単なチュートリアルページです：http://www.tutorialrepublic.com/css-tutorial/css-sprites.phpは