2

4つの画像を含む1つの単一画像ファイルを使用し、CSSスプライトを使用してそれらを表示しようとしています。どういうわけか、4つの画像すべてが表示されます。私はw3schoolsの例の1つを参照していました。

<div id="ViewTypeContainer" style="float: right; margin-top: 10px; margin-right: 10px;">
  <img id="calendarView" alt="" src="/Images/ButtonToggle.png" height="1" width="1"/>
  <img id="grdView" alt="" src="/Images/ButtonToggle.png" height="1" width="1" />
</div>

CSS:

#ViewTypeContainer img#calendarView {
    width:82px;
    height:82px;
    background: url('/Images/ButtonToggle.png') 0 0;
}

#ViewTypeContainer img#grdView  {
    width:82px;
    height:82px;
    background: url('/Images/ButtonToggle.png') -30px 0;
}

私の画像ファイルは.png形式です：

ここに画像の説明を入力してください

誰かが私の間違いを見つけることができますか？ありがとう。

4

2 に答える 2

2

ええ：あなたのimgタグにはsrc、スプライト画像を指す属性もあります。

srcスプライト画像をCSSで指定された位置で表示する場合は、画像の属性に透明な画像が必要です。

ここで画像を使用した実例（透明なGIFにdata-URIを使用しました）：

そして、これは、よりセマンティックなHTML（これらのコントロールが実際に行うことによって異なります）を使用した別の例です。つまり、<img>タグはありません。

于 2013-03-25T15:55:58.783 に答える
1

その通り。画像に背景画像を与えています。したがって、IMGタグは、スプライトの真上に通常のサイズで表示されます。スプライトの概念は、background-positioncssプロパティを使用する場合に最も簡単に適用できます。IMGタグソースの透明な.pngを生成する問題を解決するか（お勧めしません）、IMGタグをdivに置き換えて、divに同じIDとCSSを指定することができます。

于 2013-03-25T16:09:39.647 に答える