javascript - CSS で画像のセクションを繰り返す

Question

写真の途中など、写真の一部を取り、div の背景でその部分だけを繰り返します。これはリモートでも可能ですか？JavaScript でこれを行うことができると思いますが、それは面倒です。

理論的には、私の質問への答えは、写真から単一のピクセルを取り出して、それを一列に、または無地の背景として繰り返すことができるはずです。

CSSでこれを行う方法を知っている人はいますか?

Answer 1

ここで述べたこととは反対に、画像によっては、CSS/スプライトを使用してこれを行うことができます。しかし、常にそうであるとは限りません。それは、繰り返したい画像、それが存在するスプライトに対する高さ/幅、繰り返したい方向、繰り返したいコンテナのサイズに帰着します.

_{(ソース: sampsonresume.com )}

このスプライトは、サイドバーで使用するために左側の 100 ピクセルで繰り返すことができ、他の部分はナビゲーションでボタンやロールオーバー状態として機能できます。少し変更すると、繰り返し可能な部分を水平にすることができます。

Answer 2

border-imageCSS3プロパティを使用して、この効果を実現できる場合があります。

残念ながら、私は CSS2 でこのようなことを行う方法を知りません。また、CSS スプライトを介してこれを行うことはできないと思います。スプライトは画像の一部を引き伸ばすのではなく、画像の特定の部分を表示できるようにするだけだからです。

スティーブ

Answer 3

CSS はこれを行うことができません。ただし、サーバー側で行うことも、SVG グラフィックまたは Flash を使用して行うこともできます。プラグインでそれを行うことは、技術的には「背景画像」ではないことに注意してください。コンテンツをその上に配置する必要があります。