私は素晴らしいスタイルのシートを作成するために素晴らしいcompass styleを使用しています。私はスプライトを生成して背景として使うことができます。これはすべてうまく動作します。CSSのスプライトと位置付け
以前は、background-positionを使用して要素内に背景を配置していた問題があります。例えば
はここに一つだ：
background: left bottom url('../images/bottom-bg.png) no-repeat;
含む要素の高さは可変であり、これは底に背景を配置し、美しく動作します。
しかしコンパススプライトに切り替えて@extend .system-bottom-bg;を使用すると、background-positionプロパティを使用して、スプライトマップから画像の適切な位置を取得します。
このような場合、どのようにCSSのスプライトを使用できますか、要素の下部にバックグラウンドを配置することはできますか？
さらに調査すると、background-positionの制限のためにこれは不可能であるようです。 CSSスプライトの欠点のリストは、http://www.onderhond.com/blog/work/css-sprites-pros-and-consで概説されています。
background-positionは、イメージがスプライトシート内で占有する位置を定義するために使用されるため、スプライトシートのその部分がどのようにページに表示されるかを定義するためには使用できません。上にリンクされた記事は、将来実現されるいくつかの解決策を提供している。
可能な解決策の1つは、イメージをスプライトシートの最後のアイテムとして配置し、このイメージと前のイメージの間に膨大なスペースを挿入することです。明らかにこれは非常にきれいな解決策ではありませんが、コンパスはスプライトシート内の画像の位置を設定することはできませんが、とにかくこれは不可能です。
私の解決策は、マークアップを変更してbackground-position: left bottomの設定を必要としないようにすることでした。スプライトイメージを背景イメージとして設定できます。
jsfiddleを入れてください。 – Jack
コンパスが使用されているので、どのようにjsfiddlingに行くのか分かりません。 – F21
状況を説明する行だけでどのように実際の問題を見ることができますか、問題に遭遇するように作業リンクのようなものを見ることができればいいでしょう – Jack