-webkit-border-imageスタイルでメインのスプライト画像を指定するために使用しています。スプライト画像はボタン画像の集まりです。メイン スプライト イメージにインデックスを付けるために使用するスタイル属性は何ですか?
.red {
-webkit-border-image: url(sprite.png) 0 14 0 14;
}
赤いボタン スプライトは x=0、y=21 にあります。
どの属性を使用しますか? それが背景だったら、私はbackground-position. 何に使うのかわからない-webkit-border-image。
また、ボーダー画像を使用してスプライトを作成することはできないという印象を受けました。しかし、私は間違っていることが証明されました。
ボーダー画像の構文は次のとおりです。
border-image: url([file]) [offsettop] [offsetright] [offsetbottom] [offsetleft];
border-image は border-width に関連付けられています。オフセットを使用して、原点から表示する画像の量を選択することができます (つまり、10px の topoffset + 10px の border-top-width は、ピクセル 0 からピクセル 10 までの 10px を表示します)。
ただし、代わりに 0px の border-widthを使用すると、オフセットを使用して画像の一部を非表示にすることができます。この場合、パディングを使用して、border-width と同じ配置を実現できます。
詳細とデモについては、この投稿 (Scott Murray によって修正されました。Scott に感謝します) を参照してください。
でそれを行うことはできませんborder-image。これによると、CSS3 は画像スライスと画像スプライトの新しい構文を定義します。