8

明確にするために、次の画像を見てください。
1つ目は、私が達成しようとしていることです。これは、両側に 1 つずつ、2 つの背景画像を持つテキスト入力要素です。
2 番目の画像は、必要なアイコンを含むスプライト画像です。
私の質問は、背景画像をクリップして画像の一部のみを表示することは可能ですか? また、複数の背景で使用することは可能ですか?

1枚目の画像:
ここに画像の説明を入力

2番目の画像:
ここに画像の説明を入力

4

4 に答える 4

3

これを現時点で期待どおりに機能させるには、2つの別々のアイコン画像を使用する必要があります。

CSSスプライトでは、背景は要素のサイズによってクリップされます。実験的なCSS3プロパティが呼び出されbackground-clipますが、希望どおりに機能しません(特定のボックスではなく、ボックスの境界線、パディング、またはコンテンツにクリップされます)寸法。)

したがって、2つのアイコンを作成し、要素の両側に1つずつ使用しbackground-positionます。

ここでわかるように、スプライトシートを使用すると、必要な2つのアイコンではなく、背景画像全体が表示されます。BG画像を希望どおりにクリップする方法はまだありません。(ある日、うまくいけば!)

于 2012-08-15T08:01:34.350 に答える
2

別のアイコンを使用するか、入力ボックスの上に (アイコンを表示するために) 2 つの追加要素を重ねる必要があります。後者では、スプライト自体を使用できます。

于 2012-08-15T08:12:01.903 に答える
1

要素(たとえばdiv)または大きな背景画像に設定してから、で調整しbackground-positionます。画像は要素サイズ(例:div)でトリミングされます。

あなたの場合、それは周りになります:

background-position: -87 -35;

およびdivサイズ:

width: 28px; height: 30px
于 2012-08-15T07:59:49.570 に答える
0

要素に複数の背景画像をCSS3使用できます。background-position画像の特定の部分を表示するには、そのプロパティを設定する必要があります。

例えば:

background-image: url(sprites.png), url(sprites.png);
background-position: center bottom, left top;

background-postion次のようなピクセルで定義することもできます。

background-position: -5px 10px, -35px 10px;

詳細については、このリンクを確認してください

于 2012-08-15T07:59:56.843 に答える