単一のpng画像からアイコンを取得

これまで数回これを見てきましたが、私は決して自分自身を使用しませんでした。誰かがあなたがCSS spritesと呼ばれるCSS単一のpng画像からアイコンを取得

enter image description here

2013-08-12 David Dury

これは、CSSスプライトと呼ばれています。これを理解するには、各アイコンの幅と高さを認識する必要があります。 –

@Mr_Green異なるサイズのアイコンがある場合も、私はちょっと同じです。 –

この画像を作成したデザイナーの助けを借りて、以下の解決策を追加してください。 –

を使用して...例えば、この単一のPNG画像から、私は赤で、選択したアイコンを特定のアイコン画像を取得することができますどのように説明することができます。これは、http要求を減らすために使用されます。例えば

.icon1 { 
    background-image: url('YOUR_URL_HERE'); 
    background-position: 10px 10px; /* X and Y */ 
    height: 30px; 
    width: 30px; 
}

Demo

のでinshortだけに固定して高さ/幅を定義するように、基本的にすべてのアイコンは、単一キャンバスに配置されており、background-imageプロパティとして使用され、後にはCSS background-positionプロパティを使用してマッピングされていますbackground-positionプロパティを使用してキャンバスをマップします。したがって、ページ上に100個の小さなアイコンイメージがある場合、サーバーに100回のリクエストを行い、パフォーマンスを向上させるために、CSSスプライトが使用されます。

出典

2013-08-12 06:31:51

1つの質問：どのようにバックグラウンドポジションを取得しますか？正しい絵が得られるまで試してみる？それを行うテクニックやツールはありますか？ –

@DavidDury手動で、またはあなたは[スプライトジェネレータ]（https://www.google.com/search?q=css+sprite+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla： en-US：official＆client = firefox-a） –

設定しますので、表示したい画像の一部が表示されているbackground-positionを調整background-image
として画像を設定要素
にheightとwidth（ピクセル単位）固定

出典

2013-08-12 06:32:19 Quentin

画像の配置に背景略記を使用します。

div { 
    background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px; 
    width:27px; 
    height:27px; 
}

http://jsfiddle.net/T2EtY/1/

出典

2013-08-12 07:01:36

単一のpng画像からアイコンを取得

答えて

関連する問題