スプライトイメージの除数は何を意味しますか？

Question

私は使用しているスプライト画像を持っており、それらの除数を実装している他のウェブサイトを見てきました。私はそれが何を意味するのか理解できません。たとえば、

background: #fff url("/css/sprite.png") no-repeat scroll -107px -55px/167px padding-box border-box; 

「167px」とはどういう意味ですか？

Answer 1

167pxは背景サイズです。

詳しくは、thisをご覧ください。

しかし、ブラウザの互換性のために長い手書きの構文を使用することをお勧めします。私はサファリブラウザでそのような構文の問題に直面している。長い手の構文を使用すると、うまく働いた。しかし：

background-position: -107px -55px; 
background-size: 167px; 

Answer 2

をスラッシュが示唆するかもしれないものにもかかわらず、それは除算記号ではありません。実際には、2つの数値のセットが別個で、互いに無関係であることを示すためにそこにあります。 「167px」はbackground-sizeの値です。それらは彼らの初期値であるため、彼らはこのような状況では必要見えませんが-107px -55px/167px部分は、

background-position: -107px -55px; 
background-size: 167px; 

padding-boxとborder-box値はそれぞれbackground-originとbackground-clipのためのものに変換することができます（私はかどうかを知りません周囲のコードではそれらをここで指定する必要があります）。