明確にするために、次の画像を見てください。
1つ目は、私が達成しようとしていることです。これは、両側に 1 つずつ、2 つの背景画像を持つテキスト入力要素です。
2 番目の画像は、必要なアイコンを含むスプライト画像です。
私の質問は、背景画像をクリップして画像の一部のみを表示することは可能ですか? また、複数の背景で使用することは可能ですか?
1枚目の画像:
2番目の画像:
明確にするために、次の画像を見てください。
1つ目は、私が達成しようとしていることです。これは、両側に 1 つずつ、2 つの背景画像を持つテキスト入力要素です。
2 番目の画像は、必要なアイコンを含むスプライト画像です。
私の質問は、背景画像をクリップして画像の一部のみを表示することは可能ですか? また、複数の背景で使用することは可能ですか?
1枚目の画像:
2番目の画像:
これを現時点で期待どおりに機能させるには、2つの別々のアイコン画像を使用する必要があります。
CSSスプライトでは、背景は要素のサイズによってクリップされます。実験的なCSS3プロパティが呼び出されbackground-clip
ますが、希望どおりに機能しません(特定のボックスではなく、ボックスの境界線、パディング、またはコンテンツにクリップされます)寸法。)
したがって、2つのアイコンを作成し、要素の両側に1つずつ使用しbackground-position
ます。
ここでわかるように、スプライトシートを使用すると、必要な2つのアイコンではなく、背景画像全体が表示されます。BG画像を希望どおりにクリップする方法はまだありません。(ある日、うまくいけば!)
別のアイコンを使用するか、入力ボックスの上に (アイコンを表示するために) 2 つの追加要素を重ねる必要があります。後者では、スプライト自体を使用できます。
要素(たとえばdiv)または大きな背景画像に設定してから、で調整しbackground-position
ます。画像は要素サイズ(例:div)でトリミングされます。
あなたの場合、それは周りになります:
background-position: -87 -35;
およびdivサイズ:
width: 28px; height: 30px
要素に複数の背景画像を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;
詳細については、このリンクを確認してください