css - CSSでこれを行うにはどうすればよいですか？背景を持つ別の要素内の要素の透明な背景

Question

これは可能ですか？私のCSSは悪くはありませんが、これに耳を傾けることはできません。ヘッダーの後ろに背景画像を使用したいのですが、ヘッダーで背景画像を「ノックアウト」して、背景を両側に残したいと思います。それが理にかなっていることを願っています。

誰かがバッシュをしたい場合に備えて、私はフィドルを作りました...ありがとう！

http://jsfiddle.net/CnVBU/

Answer 1

これを行う最も簡単な方法は、を使用することborder-imageです。ここで更新されたフィドルを参照してください。

これがそのCSSです（複数のブラウザ）：

.container { 
    border-width: 20px;
    -moz-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
    -webkit-border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
    border-image: url(http://fc09.deviantart.net/fs71/f/2010/163/2/d/PixelBackground_02_by_Kara1984.jpg) 27 round;
    text-align:center;
}

私はBorder-Image.comでこのコードを生成しました（これを自分で書くのはすべての地獄のように混乱するためです：P）。

Answer 2

さて、今は透明です。他の色（ボディの背景色？）と一致する背景色をh1に適用したいようです。このようなもの：

http://jsfiddle.net/CnVBU/1/

明らかに、必要な背景色を使用し、マージン/パディングなどを追加して、適切な「ノックアウト」サイズを提供します。

Answer 3

jsFiddleを更新しました：

http://jsfiddle.net/CnVBU/2/

これで、h1の背景が透明になりました。

私はrgbaカラーモデルを使用しました：赤（範囲：0-255）緑（0-255）青（0-255）アルファ（0-1）。50％の透明度が必要な場合は、そこで0.5アルファを使用します。

これはすべての一般的なブラウザで機能します（ほとんどのIEにはフィルター/ハックが必要です）