0

1つのpngに統合した画像がたくさんあります。私はこれらの画像を使用してcssスプライトクラスを作成しようとしています。

<style>
img.plusOne
{
width:50px;
height:50px;
background:url(acknowledgement.png) 0 0;
}
</style>

<body>
<img class="plusOne" src="acknowledgement.png" width="1" height="1" />
</body>

pngの最初のアイコンである50pxx50pxを表示する代わりに、pngファイル全体が50x50のアイコンに圧縮されています。

4

3 に答える 3

5

これ<img>は、画像全体を読み込んで表示するためです。

通常、スプライトには、代わりに<div>または<span>タグを使用しますdisplay:inline-block<img>

于 2012-12-28T16:59:10.897 に答える
1

まさにこのように考えてください。

窓があります。窓の前に人が立っているので、窓越しに見えなくなりました。
あなたがする必要があるのは、あなたが窓を通して見ることができるように人を透明に設定することです。

img class = "plusOne" src = "acknowledgement.png" width = "1" height = "1" />内の画像は、これが正しく機能するために透明なGIFまたはPNGである必要があります。背景画像に使用しているのと同じ画像にしたくはありません。

透明なGIFはここからダウンロードできます：http： //www.unifiedwealthplanning.com/images/spacer.gif

コードの例：

<img class="plusOne" src="http://www.unifiedwealthplanning.com/images/spacer.gif" width="1" height="1" />
于 2012-12-28T17:11:07.157 に答える
0

このツールを使用して、既存のスプライトのCSSを生成します-http ://www.spritecss.com/

于 2017-03-23T05:27:10.610 に答える