これから説明することは少し複雑なので、参考になればと思いイメージを作りました。
これが大きな画像です。
ページの上部にヘッダーがあります。いくつかの特性が必要です。
- 全幅にする必要がありますが...
そのコンテンツ (ロゴとメニュー) は、
960px
幅の中央の div でラップされます。これらの 2 つの点は単純です。固定の高さと幅を持つヘッダーを作成し、次に幅とマージン
100%
を持つ div を作成して、常に中央に配置されるようにします。960px
0 auto
ここで困難が生じます:
ご覧のとおり、背景色は透明です。実際、ヘッダーの下に写真が表示されています。そして、この透明度はすべてのヘッダーで同じではありません。ロゴを配置する側には特定の不透明度があり、メニュー側には別の値があります。さらに、その2辺は対角線で区切られています。
簡単に思えますが、背景を画像に表示される方法で問題なく設定する解決策が見つかりません。