スプライトは、ディメンションを変更しない小さなアイコンではうまく機能しますが、ボタンやdivの背景などには1px幅の背景スライスをたくさん使用する傾向があります。これらのスライスをスプライトに含める方法はありますか？そうするためには、スプライトから小さな部分を取り出し、それを要素のバックグラウンド全体に外挿する方法が必要です。基本的にスプライトから切り取り、スタンドアロンのバックグラウンドイメージのように繰り返す必要があります。スプライトからCSSの背景スライスを外挿する
「SVGスタック」でこれが可能な場所を考えることができます。
<style>
svg .icon { display: none }
svg .icon:target { display: inline }
</style>
ここでより多くの深さの説明：基本的な考え方は、SVGファイル内のCSSのビットを通じて明らかにした各スプライトは同じ「タイル」上の異なる「層」であるということですが、彼らは/隠されています：http://simurai.com/post/20251013889/svg-stacks
この方法の欠点は、現時点ではMozillaでのみ動作することです。それは大丈夫だ、私たちは皆を確保するために、線形グラデーションを使用して、その回避することができますが、Mozillaは代替画像を取得します。
.element {
background: url(myBG.png);
background-image: -moz-linear-gradient(transparent, transparent), url(spriteStack.svg#myBG);
}
他のブラウザがSVGの背景に断片を支援してボード上を取得したら、あなたは適切な接頭辞の直線勾配を追加することができます彼らのために。
あなたのbgイメージは小さいので、データURIを使用することをお勧めします。
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAADU5ErkJggg==");
あなたは周波数の任意の並べ替えを使って、このイメージを更新することが予想される場合、コンパス（サス拡張子）が自動的にあなたのCSS（参照：http://compass-style.org/reference/compass/helpers/inline-data/#inline-image）の縮小化に伴い、あなたのためにこれらを生成することができます：彼らはこのような何かを見て。
グラデーション用に1ピクセル幅の画像を使用しているようです。私は、両方向ではなく、一方向のみでイメージを繰り返したいと思っています。その場合、1ピクセル幅の画像のスプライトを作成できます。そのトリックは、どの方向にイメージを繰り返すかに従ってスプライトをレイアウトすることです。グラデーションがコンテナの底に来るようになっている場合は、スプライトの下部にそのグラデーションを配置したいと考えている場合など、右または下に配置するかどうかにも注意してください。すべての画像が水平に繰り返されている場合は、1つのファイルを別のファイルの上に重ねてレイアウトすることができます。私は、画像間に透明度を持たせたい、グリッドラインを並べたり、他の画像が表示されないように十分なスペースを残したりするのが好きです。
古いIEを除くほとんどのブラウザでは、画像を使わずにCSSを使ってグラデーションを作成できます。 IEの古いバージョンでは、イメージを使用する必要があります。
私が正しくあなたを理解していれば、ミリアムの答えは正しい答えです。
私はいくつかの例を挙げて、ミリアムの答えを詳しく説明します。
ここにボタンを使用するグラデーションのCSSスプライトがあります。あなたが特定のボタンに使用する特定の勾配をターゲットに
使用するCSSのbackground-position。
ただし、画像のグラデーションは古くなっています。ほとんどのグラデーションでは、CSSとIEフィルタを使用して同じ結果を得ることができます。IEで標準的な「1色から1色へ」のグラデーションにフォールバックすることができます。また、IE8ユーザーに最新のブラウザと同じビューを提供したい場合は、代替イメージとしてイメージを使用できますここで
は、グラデーションを作成するための素晴らしいツール（フォトショップのような）であると単純に/それが生成するコードをコピー＆ペースト：http://www.colorzilla.com/gradient-editor/
私はあなたができないことのために1x1pxスライスを使用するかもしれないもので、本当に興味があります – sheriffderek
私はより新しい背景のプロパティでたくさんのものを試しました - しかし、何の問題もありませんでした。 – sheriffderek