3

そこで、スプライトシートを使用してCSSで背景画像を作成したいと考えています。そして、明確にするために、私はこの効果のために行くつもりはありません。フルスプライトシートがあります。シート上に16pxx16pxの正方形を取り、それを繰り返しの背景として設定したいと思います。

将来的には、URLパラメータのメディアフラグメントを使用して空間ディメンションを介してこれを実行できるようにしたいと考えていますが、これはまだサポートされていないため、別の方法を探しています。最新のCSS技術やハックを介してこれと同じ効果を得る方法はありますか？

いくつかのメモ：

  • 古いブラウザをサポートする必要はありません。最新のFFまたはChromeでサポートできます。
  • 私は純粋なCSSソリューションを好みます。必要に応じてdata：URIを使用してJS / Canvasソリューションを作成できますが、これが必要になる可能性のある要素の数を考慮すると、純粋なCSSでより良い結果を得ることができれば、作成する必要はありません。
  • xとy方向の両方で繰り返す必要があります
  • 挿入したいすべてのスプライトのスプライトシートをロードする必要がないように、メモリ/キャッシュ内の単一の画像を利用するソリューションを探しています
4

2 に答える 2

2

これはFirefoxでのみ機能する純粋なCSSソリューションですが、すべての要件を満たしているようです。

body{ background-image: -moz-image-rect(
    url('http://placekitten.com/500/500'),
    0,100,100,0
); }

http://jsfiddle.net/47CMr/2/の例

于 2012-01-18T21:19:39.683 に答える
1

あなたの条件に当てはまる唯一の方法があります（最も難しいのは繰り返す必要があります）：を使用することborder-imageです。

デモ付きのダブレット： http：//dabblet.com/gist/1635890

重要なのは、プロパティのborder-image-slice部分を使用して、使用する部分にマークを付けることができるということです。border-image構文は少し注意が必要ですが、これを使用すると、border-imagesからさまざまな繰り返しパターンを作成できます。また、必要な部分が端にない場合、またはXとYの両方で画像を繰り返す必要がある場合は、clipプロパティが必要になるため、ブロックを絶対位置に配置する必要があります。これらはすべてOperaでも機能します。

しかし、悪い点が1つあります。それは、border-imageの中央部分のレンダリングが非常に難しいことです。WebkitとMozillaの間だけでなく、SafariとChromeの間でも違いがあるため、多くのハックを追加しました。そこの。

結論として、目標は達成できますが、ハックの地獄があります。

-moz-image-rectしたがって、data：uriを使用することをお勧めします。これは、WebkitとFxの両方でこれを行う他の方法がないためです（Fxでは、上記のようにのみ使用できます）。

于 2012-01-18T22:32:11.393 に答える