1

我在一个包装器 div 中有 2 个 div，我想知道是否可以将 #wrapper div 放在内容（#outer 和 #inner）之上。

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

我希望#wrapper 添加透明背景而不对 HTML 进行任何更改。我曾尝试使用 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 中工作，请参阅 IE 的css 'pointer-events' 属性替代项，它可能会有所帮助。

于 2013-06-21T14:34:09.163 回答
1

你问的是不可能的。

但是，当您在 #wrapper 中添加另一个 div 并将其定位时，这是可能的

position:absolute;

并赋予它透明的颜色

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

编辑：Harley 的解决方案更好，因为 OP 不想更改 HTML

于 2013-06-21T14:34:46.507 回答
1

您可以给孩子position: relative和z-index: -1（或其他负值），但我不确定这是多么错误或浏览器支持是什么。

此处提供更多信息：http: //philipwalton.com/articles/what-no-one-told-you-about-z-index/

这是一个简单的例子：http ://codepen.io/Rykus0/full/jhwev

否则，正如其他人所说，您需要使用absoluteor包含一个新元素和位置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 回答