5

私は、どのように実行するかが100%わからないデザインの構築に取り組んでいます。これは本当に大まかな例です。

http://jsfiddle.net/cgRyH/1/

基本的に、水平方向に無限に繰り返すには、単純な背景テクスチャが必要です。その上、コンテンツの下に、コンテンツを保持するアクセントよりも少し広いアクセントを背景に追加する必要がありdivsます。私の例では、これを達成したdivのは、この追加の背景画像を追加することだけが目的です...しかし、これは不格好なようです。

これを達成するためのより良い方法はありますか?

編集:私の白いフッターは、画面の下部と両側に伸びるように見える必要があります。

4

2 に答える 2

3

CSS3を使用することが可能です。いつものように、IE9まで表示されなかったIEファミリを除いて、かなりよくサポートされています。

http://www.css3.info/preview/multiple-backgrounds/

それに加えて、あなたがそれをしている方法は理想的です。

于 2012-11-08T21:12:15.897 に答える
1

いくつかのコメント:

「無限大」に続くディメンションを作成しようとすると、通常、計算が必要になります(javascript)。スクロールバーが存在する場合、100%は画面全体をカバーしないためです。ただし、自動的に引き伸ばされる画像を使用する場合は、CSSの巧妙なトリックがあります。background-size: cover;。例として、これをフィドルに組み込みました。また、cssを使用してフッターに何かを追加しました。JavaScriptを使用できない結果として、この例では、フッターの背景色を提供するために、より低いz-index値で画面全体のサイズのdivを使用します。フッターを目立たせるために、背景を黒、テキストを白でハイライトしました。入って逆に変更することもできますが(これはあなたが望むものです)、表示のために、効果を確認できるようにコントラストを高くしました。

次に例を示します。http://jsfiddle.net/cgRyH/2/

于 2012-11-08T21:38:14.337 に答える