10

Web上でシームレスなCSSパターンを作っています。私はこれがまったくナンセンスであり、まったく実用的でないことを知っています. しかし、それはただ楽しむためです。

http://codepen.io/vennsoh/pen/iFKyo

最初のタイルの作成が完了しました。今、それを繰り返して背景全体を埋める方法を考えています。

HTML と CSS を使用するだけでこの偉業を達成できますか? または、これを完了するには JavaScript を使用する必要がありますか?

-

JavaScriptを使用している場合、私を修正するか、より良い方法を提案する場合の私の手順は次のとおりです。

  1. 現在のブラウザの幅と高さを計算します。
  2. 1 つのタイルは (150x150) です。画面全体をカバーするために必要な数の div を作成するだけです。

-

物事を動かしたり、各ポリゴンの色を変えたりしたいかもしれません。静的ではありません。背景画像のソリューションを探しているわけではありません。

ありがとう、ヴェン。

4

2 に答える 2

2

実はこれはhtmlとcssだけで可能です。あなたの例の問題は、background-repeatプロパティを設定すると背景のすべての部分が重なるため、サイズが異なるため、図形のサイズを変更して配置する必要があることです。あなたのケースでこれを行う簡単な方法はbackground-size、すべての形状 (目的の完全なパターンのサイズ) に対して 1 つを設定し、それに応じて位置を変更することです。

例の一部を変更して、どのように見えるかを理解してもらいました: http://codepen.io/anon/pen/pnxyd

于 2013-02-05T04:12:57.300 に答える
1

追加するだけで、

float:left;

cssに追加し、ここのようにdivの複数のコピーを作成します... http://codepen.io/anon/pen/rlDqh

これでうまくいくはずです。

于 2013-02-05T02:36:02.843 に答える