0

次のようにコード化されたプリコードページがあります。

    <div id="linearBg">
            <div id="wrapper">
                    <div class="logo"></div>
                    <div class="navigation"></div>
                    <div class="video"></div> 
                    <div class="content"></div>
            </div>
    </div>

linearBg はグラデーションの背景で、ウェブサイトのバックボードです。ラッパーは内部 div のコンテナーであり、残りはコンテンツ指向です。

だから私はすでにスタイルとあらゆる種類でこれを実装していますが、追加したいのは:

<div class="watermark"></div>

コンテンツとビデオ div の両方の下/後ろに、逆透かしのようなものがあります。

Z インデックスを試してみましたが、専門家ではありません。これを可能にするために私を案内してもらえますか?

http://jsfiddle.net/nEWCP

必要なのは、ビデオとコンテンツ div の両方の背後にある透かしを取得することだけです。

4

3 に答える 3

2

このようなもの？ http://jsfiddle.net/yXTYM/3/

秘訣は次のとおりです。

  • position: relativeビデオとコンテンツのdiv
  • position: absolute透かしdivで、ポジショニングなしで、前の要素（nav）が終了したところから開始します
  • height: 100%透かしの上に、ラッパーの下部にまたがるようにします
  • overflow: hidden透かしがその下に拡張しないように、含まれているdivに

これがあなたが考えていたものであるかどうか私に知らせてください。

于 2012-10-15T15:59:19.423 に答える
0

あなたの説明からすると、新しい HTML 要素さえ必要ないと思います。あなたが説明したように「逆透かし」が必要な場合は、コンテンツとビデオ要素の背後に別の背景が必要なようです. グラデーションとは別物。

本当に必要なのは、必要なときに透かしを追加するクラスを CSS で定義することだけです。

基本的な例を次に示します。オレンジ色は、ビデオとコンテンツのみの背後にある透かしをシミュレートします。

.watermark { background: url('/path/to/watermark.png'); }

<div id="linearBg">
    <div id="wrapper">
        <div class="logo"></div>
        <div class="navigation"></div>
        <div class="video watermark"></div> 
        <div class="content watermark"></div>
    </div>
</div>
于 2012-11-23T19:59:32.933 に答える
0

http://jsfiddle.net/82saE/

私はあなたが求めているものを持っていると思います-寸法を反映するラッピング要素linearBg-繰り返し画像を含むグラデーションの背景も提供します.

于 2012-11-26T21:58:43.910 に答える