8

更新 -私はこれを理解したと確信しています。コードはやや長いですが、ソースを表示できるようにここにページを投げました: http://www.sorryhumans.com/knockout-header

コンセプトはhttp://algemeenbekend.nl/misc/challenge_gerben_v2.htmlに基づいており、私のニーズに合わせて調整されました。

ヘッダーは応答性が高く、ノックアウトされています。(悪い、1 分間応答の背景画像の実装は無視してください!)。この実装も CSS3 を使用していないため、互換性の問題はあまりないと思います。

私が見つけた唯一の問題は、Chrome でブラウザーの幅が奇数 (1393px など) の場合、右側の流体列とメイン中央の列の間に 1px の隙間があることです。この問題は、最新バージョンの Firefox、Internet Explorer、または幅が偶数の場合 (Chrome では 1394px など) には見られません。何か案は？

元の質問: 自分で設計したヘッダーをコーディングしようとしていますが、探している効果を得る方法がわかりません。添付の画像を見てください (いいえ、これは実際に私が取り組んでいるものではありません :) 単なる例です!)

例の絵

写真は全幅レスポンシブ写真です。ヘッダーは全幅ですが、そのコンテンツはレスポンシブ グリッド上にあり、任意のサイズ (黒い線で表示) を超えませんが、縮小できます。私はこれをすべて達成することができますが、ロゴがある場所でヘッダーバーを透明にする方法を理解するのに苦労しています. つまり、ロゴをバーの上に置くのではなく、ヘッダーから「ノックアウト」したいと考えています。

これは可能ですか？

4

2 に答える 2

4

ノックアウト効果は本来サポートされていないため、テキストを画像の一部として含める必要があります。

これを行う最も簡単な方法は、ノックアウト効果の背景をイメージのソリッド部分にすることです。.pngノックアウト効果が必要な場所に無地の背景と透明度を持つ を作成し、 cssopacityを使用してヘッダー全体を部分的に透明にすることができます。画像ではないセクション (黒いバーの外側) には背景色があり、画像のあるセクションには背景色がないように、複数のセクションでヘッダーを設定する必要があります。

非常に大まかに：

<div id="outerHeaderWithOpacity">
  <div class="hasBackground">Left side, will stretch</div>
  <div class="noBackground">Image(s) go here</div>
  <div class="hasBackground">As many sets as you need</div>
  <div class="noBackground">Image(s) go here</div>
  <div class="hasBackground">Right side, will stretch</div>
</div>
于 2012-07-04T00:32:41.020 に答える
2

http://jsfiddle.net/GZ8Xv/

最も美しい解決策ではありませんが、実験的な css3 フレックスボックスを使用します: (display: tableフォールバックあり)

<div class="wrapper">
    <div class="left"><br /></div>
    <div class="middle"><br /></div>
    <div class="right"><br /></div>
</div>

.left, .right
{
    height:100%;
    border: 1px solid black;
    display:table-cell;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    -webkit-flex: 1;
}

.middle
{
    display: table-cell;
    display: -webkit-flexbox;
    width: 500px;
    height:100%;
    border: 1px solid blue
}

.wrapper
{
    display: table;

    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -o-flexbox;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -o-box-orient: horizontal;
    width: 100%;
    height: 100px;
}

注意: flexbox の w3c 仕様はまだ流動的であり、3 回目に変更される可能性があります。これは IE9 (IE9 と IE8 の両方のモード。IE7 モードでは動作しません) と Chrome 20 および 22 でのみテストしました。

いくつかの小さな変更: http://jsfiddle.net/GZ8Xv/2/で、javascript を使用しない 5 つの div レイアウトがあります。

于 2012-07-04T02:04:55.207 に答える