問題タブ [css-sprites]

約 20 ～ 50 個の動的画像 (非静的ソースから提供される画像) を含む Web ページがあります。これらの画像は、リクエスト URL に基づいてサーブレットを介して提供されます。これにより、イメージごとにリクエストが生成され、パフォーマンスが低下します。

これらの画像が静的な場合は、CSS スプライトを作成して、50 件のリクエストを 1 件のリクエストに置き換えます。それらは動的であるため、もちろんこれは簡単ではありません。実行時にこれらの画像を単一のスプライトに集約するために使用できるツール/ライブラリ/メソッドを探しています。幸いなことに、画像サイズは一定で、すべて同じであるため、これがはるかに簡単になります。

助言がありますか？

スプライトを作成していて、高さが約 4000px に達しています。グラフィック デザイン コミュニティ内で使用される最大スプライト高さの一般的なサイズはありますか?

Internet Explorer が、作成したこの .css スプライト メニューをレンダリングしないのはなぜですか? コードにエラーが見つからないので、誰かが私に光を当ててくれませんか。 HTML:

ラッパーとリンクの CSS:

a:link と :hover の CSS の例:

これが簡単なウェブページです。テキストと画像をセルの垂直方向の中央に配置したいと思います。画像の左側のテキストが欲しいのですが、それは問題ではないはずです...

手伝ってくれる？

default.css。必要に応じて追加してください。

アップデート：

エヴァンの答えがうまくいったと言うことを含めて、私はいくつかの以前のコメントを取り戻します。

以下が機能しました。「*」に注意してください。エヴァンの答えにはが含まれていませんでした。「」とはどういう意味ですか？

.style1 * {vertical-align：middle; }

複数の画像がエンコードされたPNGを取得しました。HTML 内のすべての画像を使用するにはどうすればよいですか。1 つはデフォルトで、もう 1 つはマウスオーバーで使用します (別の画像を作成して作業したくありません)。

例はありますか？

リストの背景画像に CSS スプライトを使用することはできますか? 通常、私は次のように CSS を使用してスプライトをレンダリングします。

<li> 要素の箇条書きにスプライトを使用することはできますか? list-style-image、list-style-position という CSS プロパティがありますが、list-style-image-width や list-style-image-height などのプロパティが存在しないと動作させる方法がわかりません。同じように。

ありがとう。

この記事http://css-tricks.com/css-sprites/では、1 つの大きな画像から小さな画像を切り取る方法について説明しています。それが可能かどうか教えてください/どのように小さな画像を切り取り、レイアウトする前に切り取った領域を拡大縮小できますか?

その記事の例を次に示します。

spriteme1.png から切り抜いた後、その画像を拡大縮小する方法を知りたい

例の URL は次のとおりです: http://css-tricks.com/examples/CSS-Sprites/Example1After/

Item1,2,3,4の横にあるアイコンを小さくできないか教えてください。

スプライトのロールオーバーがジャンプする原因を知っている人はいますか

フォトショップの質問である可能性が高いと思いますが、完全にはわかりません. とにかく、ここで答えを得たいと思っています.

これは、ロールオーバーで実行したいことです例1

これは私のテストページです（再生ボタンを参照）

spriteme.comでスプライトを作りました

ありがとう、リチャード

「今すぐログイン」のテキスト値を、次を使用しているタグから透明にし<input type="image" value="Login Now">たい...、背景色を透明にするだけですか?

そのため、レイアウトにカスタムカラーが必要ですが、レイアウトに（background：url（something.jpg））を含む巨大な画像を叩く以外に、より良い方法を探しています。

ほとんどの場合、カラーパレット（Adobe Kuler、colorloversなどから）を取得し、各色の5x5サンプルを取得して、CSSスプライト用の配列に貼り付けるか、個別のファイルとしてそれらにアクセスすることを考えています.color-one {transparent url(./one.gif) repeat}。色を使いたいときはいつでもそれを再利用します。

このようにすることの欠点はありますか？そして、もし私がウェブセーフな色に固執するべきであるか、それともこれを行うためのより良い方法がありますか？