CSSで画像の一部を繰り返す

Question

画像の部分（例えば、ピュアの真ん中）を撮り、divの背景でその部分だけを繰り返すことができます。これはリモートでも可能ですか？私はjavascriptでこれを行うことができると思いますが、それは乱雑です。

理論的には、私の質問への答えは、画像から1つのピクセルを取り出し、ラインで、または堅実な背景として繰り返すことができるはずです。

CSSでこれをどのように行うことができますか？

Answer 1

この効果を得るには、CSS3 border-imageプロパティを使用することができます。

残念ながら、私はCSS2でこの種のことをする方法を知らない。また、スプライトは画像の一部分を伸ばすことができないので、CSSスプライトではできないと思います。画像の特定の部分を表示するだけです。

スティーブ

Answer 2

あなたはクロスブラウザのソリューションをしたい場合は、現在、あなたはCSS-ソリューションをしたい場合は特に、運の出ています。

JavaScriptを使用する唯一の方法はcanvas要素を使用することですが、IEではサポートされていません。

Answer 3

CSSはこれを実行できません。ただし、サーバー側で実行することも、SVGグラフィックスまたはFlashを使用して実行することもできます。プラグインを使用してプラグインを実行することは、技術的には「バックグラウンドイメージ」ではないことにご注意ください。

Answer 4

ここに記載されている内容とは逆に、イメージこれはCSS/Spritesで行うことができますが、必ずしもそうであるとは限りません。繰り返すイメージには、それが存在するスプライトに対する高さ/幅、繰り返したい方向それ、そしてあなたはそれがで繰り返したいコンテナのサイズ。

alt text http://www.sampsonresume.com/labs/sprite.gif

他の部分は、ボタンやロール - としての役割を果たす可能性がありながら、このスプライトは、サイドバーで使用するために、左100pxにに繰り返すことができます以上状態をナビゲーション内に表示します。わずかな変更で、繰り返し可能な部分を水平にすることができます。