1

ラッパー div 内に 2 つの div があり、#wrapper div をコンテンツ (#outer と #inner) の上に配置できるかどうか疑問に思っていました。

    <div id="wrapper">
       <div id="outer">
          <div id="inner"></div>
       </div>
    </div>

HTML を変更せずに #wrapper で透明な背景を追加したい。z-index を使用してそうしようとしましたが、成功しませんでした。

このフィドルを参照してください: http://jsfiddle.net/nPpDE/

どんな助けでも大歓迎です。

4

4 に答える 4

5

を使用して管理しました:after- http://jsfiddle.net/t6mMR/ -余分なhtmlはありません!

このような：

#wrapper:after {
   position:relative;
   top:-200px;
   left:0px;
   content:"";
   width:400px;
   height:200px;
   display:block;
   background:rgba(255, 0, 0,0.5)
}

擬似要素は他の要素の上に配置され、半透明の背景が適用されます。

__

編集：それを行うわずかに異なる方法-（以下のコメントを参照）（使用position:absolute

http://jsfiddle.net/t6mMR/1/

__

注-疑似要素を「クリックスルー」できるようにするには、追加pointer-events: none;します。

http://jsfiddle.net/t6mMR/1/

これを IE で動作させるには、css 'pointer-events' property alternative for IEを参照してください。役立つ場合があります。

于 2013-06-21T14:34:09.163 に答える
1

あなたが求めていることは不可能です。

ただし、 #wrapper 内に別の div を追加して配置すると可能です

position:absolute;

そして透明感のある色にします

http://jsfiddle.net/nPpDE/1/

編集:OPはHTMLを変更したくないため、ハーレーのソリューションの方が優れています

于 2013-06-21T14:34:46.507 に答える
1

position: relative子に and (または負の値) を与えることができますが、z-index: -1それがどれほどバグが多いか、またはブラウザーのサポートが何であるかはわかりません。

ここで入手可能な詳細情報：http: //philipwalton.com/articles/what-no-one-told-you-about-z-index/

簡単な例を次に示します: http://codepen.io/Rykus0/full/jhwev

absoluteそれ以外の場合は、他の人が言ったように、またはのいずれかを使用して新しい要素と位置を含める必要がありますfixed

于 2013-06-21T14:38:02.000 に答える
0

?? そして、内側のコンテナに不透明な色を付け、メインのコンテナに通常の色を付けることはどうですか:

#wrapper{
    position:relative;
    background:black;
    width:400px;
    height:200px;
}
#outer{
    position:relative;
    width:400px;
    height:200px;
    background: rgba(50,0,0,0.75);
}
#inner{
    position:relative;
    width:350px;
    height:200px;
        background:rgba(0,50,0,0.75);
    margin: 0 auto;
}

それに伴うフィドル:) http://jsfiddle.net/nPpDE/2/

于 2013-06-21T15:02:01.427 に答える