1

私は CSS にまったく慣れていないので、常に自分で物事を理解しようとしていますが、これはあまりにも長い間行き詰まってしまいました... 少しの助けをいただければ幸いです。:-)

基本的に、私がしなければならないことは、コンテナの幅の 100% を占める 4 つの異なるセクションを含む中央のコンテナを持つページです。ここで注意が必要なのが、これら 4 つのセクションのそれぞれに、中央のコンテナーを超えてページの幅 100% を占める異なるテクスチャ背景があることです。

基本的なワイヤーフレームは次のとおりです。

http://i.imgur.com/Qlwjb.jpg

私はこれを行うためにいくつかのことを考えました：

• 1 : メイン コンテナを用意する代わりに、ページの 100% 幅を占める 4 つの div を作成し、テクスチャ背景を適用してから、.class を使用して別の 4 つの div を作成し、それらに幅を与えて中央に配置します。これで問題は解決しますが、可能な場合は追加の div を作成しないようにする必要があります。（私は学生です。ほら、divが少ないほど、成績が良くなります。:-/ ）

• 2 : 4 つのテクスチャすべてを含む垂直の背景画像を本体に適用し、X 軸上でのみ繰り返されるようにします。これはおそらく最も簡単ですが、最も汚い方法です: 4 つのセクションの高さを固定する必要がありますが、そのうちの 1 つに何かを追加する必要がある場合、状況が悪化し、それに合う別の垂直背景画像を作成する必要があります。 .

• 3 : おそらく「最もクリーンな」方法です。複数の背景をボディに適用し、それらが重ならないように、上部から異なる距離で開始するようにします。しかし、そこが私の CSS スキルの限界です。その方法がよくわかりません。また、私は学生なので、成績を上げるために「高度な」テクニックを使用しながら物事をシンプルに保つように努めなければなりません。つまり、ボディに複数の背景を適用することを選択した場合、おそらく 4 つの背景すべてを含むスプライトを使用する必要があります。

http://i.imgur.com/Awr4L.jpg

...これは、私にとって物事を非常にトリッキーにするものです。反復可能な背景画像を適用して、適用先の要素 (この場合は本文) のサイズが定義されていない場合にその特定の部分のみを表示できるかどうかはわかりません。bg-image を「クロップ」して、適用される要素にサイズを指定せずに繰り返す方法はありますか?

よろしくお願いします。

4

1 に答える 1

0

私は解決策1が進むべき道だと思います。追加の div についてはあまり強調しません。コンテンツが中央に配置されているときに、各セクションにページの幅全体にわたる独自のテクスチャ背景が必要な場合は、追加の div が必要です。

他のオプションでは、試行錯誤が多すぎます (あるセクションのコンテンツの高さが、次の背景が「魔法のように」配置されたポイントを超えないようにすることはできますか?)。

私は過去に同様のことをしなければなりませんでした。方法は次のとおりです。

100% 幅 (div の既定の動作) にまたがる互いの上に積み重ねられた 4 つの div を作成します。

それぞれに独自の css クラスを与え、背景画像をそのクラスに割り当てます。中央に配置されたコンテンツの場合、各 div 内に適用されるグローバル スタイルを持つ再利用可能なクラス (.container) を作成します (幅: 960px; マージン: 0 auto;)

したがって、マークアップは次のようになります-

<div class="div1">
    <div class="container">Content for div 1</div>
</div>
<div class="div2">
    <div class="container">Content for div 2</div>
</div>
<div class="div3">
    <div class="container">Content for div 3</div>
</div>
<div class="div4">
    <div class="container">Content for div 4</div>
</div>

あなたのcssは次のようになります-

.div1 {
    background: url(../img/bgs/div1-bg.jpg) 0 0 repeat;
}

.div2 {
    background: url(../img/bgs/div2-bg.jpg) 0 0 repeat;
}

.div3 {
    background: url(../img/bgs/div3-bg.jpg) 0 0 repeat;
}

.div4 {
    background: url(../img/bgs/div4-bg.jpg) 0 0 repeat;
}

.container {
    width: 960px; //based on 960 grid
    margin:0 auto; // used to center the container based on it's width
}

デザインに必要な背景の配置と繰り返しのルールを使用しますが、それが一般的な考え方です。

css の目標は、要素ごとに個別のスタイルを実行するのではなく、共通のデザイン パターンを特定し、クラスを使用してそれらのパターンを可能な限り (上記のコンテナー クラスのように) 再利用することです。

Jonathon Snooks Smacssと、Harry Roberts によるこのブログを読むことを強くお勧めします。

それが役立つことを願っています:-)

于 2013-07-14T06:51:29.397 に答える