0

pnmcat-lrを使用して1つにまとめた画像の行が必要です。ピースがハイライトと交換されるので、イメージマップは必要ありません。<img>意味のある画像があるので、背景よりも欲しいです。

有望な例はhttp://css-tricks.com/css-sprites-with-inline-images/とhttp://1plusdesign.com/articles/css-clip-property-inline-image-sprites/のようです。後者は、3つのimgが連続して表示されるhtmlも表示します。

ただし、デモをダウンロードするときは、それらを個別に使用するだけです。そして、デモ1のdivを貼り付けると、自分のページで試したものと同じ結果が得られます。それらはすべて、一列に並んでいるのではなく、互いに重なり合っています。私はそれらを別々に包み、ラッパーに幅を置き、それを相対的に配置しようとしましたが、何も機能しません...

ところで。両方の作成者が2つのクラスを同時に使用します。これには何か理由がありますか？ラッパーがあるとすると、すべての画像で同じクラスはネストされたcssであり、他のクラスはid（1回だけ使用される場合）である可能性があります。

.wrapper img {
    position:absolute;
    top:0;
    left:0;
}
#sad { clip: rect(0 128px 128px 0); }
4

2 に答える 2

0

明確な答えを提供するのに十分なコードを表示しませんでした。

「互いに重なり合っている」とは、それらがすべて同じ場所にあることを意味する場合、私の推測では、ラッパーにはposition: relativeプロパティがありません。したがって、画像はすべて、ラッパー自体に対して直接ではなく、ラッパーのコンテナに対して配置されます。それらがに設定されている場合top: 0; left: 0、互いの上にあることが正しい動作です。クラスで使用position: relative;し.wrapperますが、画像の配置は画像のクリッピングに関連していることにも注意してください。

「互いに積み重ねる」とは、垂直に積み重ねることを意味する場合、ラッパーfloat: leftは一列に並べる必要があると思います。これはまだクリッピングとは何の関係もありません。

于 2012-01-09T02:16:46.590 に答える
0

なぜスプライトクリッパーが対応する負の左または上を置くことを主張するのか疑問に思いました。これをミステリーとして受け入れるべきではありませんでした。それは正確に理解するための鍵だからです。クリップには奇妙な形状があり、全体像はそこにありますが、変更されていない（!!!）位置には長方形だけが表示されます。ただし、imgタグは、rectの周りにのみあるボックスです。

今度は絶対位置と負の左で、すべての長方形を同じ位置に引っ張ります。代わりに、私が望んでいるのは、ギャップを取得するためにそれらをもう少し正しく移動することです。これにより、 http：//makepp.sourceforge.net/のタブバーはすべてのブラウザで驚異的なように機能します。

于 2012-01-10T23:13:26.227 に答える