ページの要素の背景としてスプライトイメージが設定されていますが、実際に画面上に表示されるように適切なオフセットを見つけるにはどうすればよいですか?CSSスプライトの正しいオフセットを見つけるにはどうすればよいですか?
2
A
答えて
5
グラフィックスプログラムでスプライトイメージを作成するときは、各要素のオフセットを書き留めて、CSSのスプライトイメージを使用する必要があります。
2
スプライトを作成し、CSSをあなたのために配置するWebツールがあります。 http://css-sprit.es/がその例です。
2
オンラインでCSS Sprite Generatorを調べる価値はありますが、このアプローチの退屈さを取り除く必要があります。
0
覚えておくべき重要なことは、オフセットが負のになることです。あなたは100x100のスプライトと100x500のイメージを持っている場合は、オフセットは次のようになります。
.img1 { background-position: 0 0; }
.img2 { background-position: 0 -100px; }
.img3 { background-position: 0 -200px; }
.img4 { background-position: 0 -300px; }
.img5 { background-position: 0 -400px; }
0
PNGファイルの空き領域が非常に少数のバイトを占めているので、ちょうど置くすべての「イメージは」定期的な間隔で、すべての言います50または100ピクセル。そうすれば、最初の適切な値を見つけてそこから50/100ピクセルを取り除くことができます(vimの50 ctrl-x)。
2
tool like thisを使用して、スプライト内のアイコンの背景位置を取得できます。
最初に画像をアップロードし、次にスプライトからアイコンを選択する必要があります。 CSSが生成され、生成されたCSSをコピーしてクラス内で使用するだけです。
関連する問題
- 1. AS3:ディープネストされたスプライトの親をステージから見つけるにはどうすればいいですか?
- 2. JTextPaneでオフセットの表示位置(x、y)を見つけるにはどうすればよいですか?
- 3. レーキタスクのソースファイルを見つけるにはどうすればよいですか?
- 4. ファイルを修正した最新のgit commitを見つけるにはどうすればよいですか?
- 5. "未解決のテキストシンボル" - 正しいライブラリを見つけるにはどうすればいいですか
- 6. k-bestソリューションを見つけるにはどうすればよいですか?
- 7. Salesforce.comの各プラットフォームリリースでバグ修正の一覧を見つけるにはどうすればよいですか?
- 8. 私のパッケージを見つけるにはどうすればいいですか?
- 9. BFSで実際に見つかったパスを見つけるにはどうすればよいですか?
- 10. このような状況でCSSスプライトを作成するにはどうすればよいですか?
- 11. 最後にを見つけるにはどうすればいいですか?
- 12. Webアプリケーションで未使用のCSSルールを見つけるにはどうすればいいですか?
- 13. ビジュアルスタジオ2012でWindowsデザイナーを見ているコントロールを見つけるにはどうすればよいですか?
- 14. CSSだけでドロップダウンメニューを正しく実装するにはどうすればよいですか?
- 15. 正規表現 - 試合内で試合を見つけるにはどうすればいいですか?
- 16. 2つのリストから一致するアイテムを見つけるにはどうすればよいですか?
- 17. TextMate:キーボードショートカットに関連付けられたコマンドを見つけるにはどうすればよいですか?
- 18. CSSで箇条書きやコンテンツを垂直にオフセットするにはどうすればよいですか?
- 19. バックボーンフェッチによって生成されたエラーを見つけるにはどうすればいいですか
- 20. System.Windows.Forms.DataVisualization.Charting.Chartでラベルをオフセットするにはどうすればよいですか?
- 21. 各スレッドが実行されているプロセッサを見つけるにはどうすればよいですか?
- 22. 2つのCSVファイルで同様の行を見つけるにはどうすればよいですか?
- 23. スプライトにキーコマンドを追加するにはどうすればよいですか?
- 24. グラフの完全でない二者間マッチングを見つけるにはどうすればよいですか?
- 25. 特定の値に近い値を見つけるにはどうすればよいですか?
- 26. 2セットのノイズの多いデータの交差を見つけるにはどうすればよいですか?
- 27. ContentPresenterに適用されるDataTemplateの要素を見つけるにはどうすればよいですか?
- 28. 背景イメージ(CSSスプライト)にTITLEとALTを追加するにはどうすればよいですか?
- 29. C#のリスト内で連続した整数を見つけるにはどうすればよいですか?
- 30. JavaScriptで.data()(jQuery)に相当するものを見つけるにはどうすればよいですか?
ええ、画像自体またはブラウザウィンドウの上隅に関連するこれらのオフセットですか? – echobase
これは画像に対して相対的なオフセットです。 – ceejayoz