CSSを使用して「ノックアウト」効果をどのように達成できますか？

Question

UPDATE -私はこれを理解しました。コードはやや長いですが、私はここでページを投げてソースを見ることができます。http://www.sorryhumans.com/knockout-header

コンセプトはhttp://algemeenbekend.nl/misc/challenge_gerben_v2.htmlに基づいており、私のニーズに合っています。

ヘッダーが応答してノックアウトされます。 （悪い、1分応答のbg画像実装を無視してください！）。この実装ではCSS3も使用されていないため、互換性に関して多くの問題はないと思います。

唯一の問題は、ブラウザの幅がChromeの奇数（たとえば1393ピクセル）の場合、右側の流体カラムとメインの中心カラムの間に1ピクセルのギャップがあることです。 Firefox、Internet Explorerの最新バージョン、または幅が偶数（Chromeの場合は1394ピクセル）の場合、この問題は表示されません。何か案は？

オリジナル質問： 私は私が設計し、ヘッダーをコード化しようとしますが、私が探している効果を取得する方法を見つけ出すことができませんよ。 （いや、これは実際に私は:)ちょうど例に取り組んでいるものではありません！）添付画像をご覧下さい

写真はフル幅の応答の写真です。ヘッダーは全幅ですが、内容は任意のサイズ（黒線で示す）を超えないレスポンスグリッド上にありますが、スケールを下げることができます。私はこれをすべて達成することができますが、私が問題を抱えているのは、ロゴがどこにあるかをヘッダーバーを透明にする方法です。言い換えれば、ロゴをバーの上に置くのではなく、ヘッダーの「ノックアウト」したいと思います。

これも可能ですか？

Answer 1

ノックアウトエフェクトは本質的にサポートされていないため、テキストを画像の一部として使用する必要があります。

これを行う最も簡単な方法は、ノックアウトエフェクトの背後にある背景をイメージのベタ部分にすることです。ノックアウトエフェクトを使用する場合は、背景と透明度を固定した.pngを作成し、ヘッダ全体を部分的に透明にするにはcss opacityを使用します。画像のないセクション（つまり黒いバーの外側）は背景色を持ち、画像のあるセクションは背景色を持たないように、複数のセクションでヘッダーを設定する必要があります。

非常に大まか：

<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> 

Answer 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; 
} 

フレックスノート：フレックスボックスのw3c仕様はまだ融通しており、3回目の変更が可能です。私はIE9（IE9とIE8の両方のモード）でこれをテストしました。IE7モードでは動作しません）、Chrome 20と22

少しの変更点：http://jsfiddle.net/GZ8Xv/2/とjavascriptのない5つのdivレイアウトがあります。