2

我有以下 CSS 代码：

#overlayouter
        {
            display: inline-block;
            background-color: red;

            width: 900px;
            height: 900px;

            z-index: 100;
        }
        #overlayinner
        {
            display: inline-block;
            position: relative;

            z-index: 0;

            width: 900px;
            height: 900px;

            background-image: url(picurl);
            background-position: 0 0;
            background-repeat: no-repeat;
        }

HTML 只是：

<div id="overlayouter">
    <div id="overlayinner">

    </div>    
</div>

我在子 div 中有一个背景图像。

我想在它的父 div 中使用 rgb() 的背景颜色（现在它只是红色）。

但是为什么子元素背景在上面呢？是因为一个元素只能有背景颜色或背景图像吗？孩子的种类占主导地位？

我希望父 div 稍后有一个 rgba，这将进行某种类型的覆盖。

我已经设置了一个 jsfiddle 来显示问题.. http://jsfiddle.net/9Rj9V/

4

2 回答 2

4

没有 z-index：
在此处输入图像描述

使用 z 索引：
在此处输入图像描述

堆叠上下文：
使用 z-index

总之：

  • 将 z-index 值定位和分配给 HTML 元素会创建堆叠上下文（与分配非完全不透明度一样）。
  • 堆叠上下文可以包含在其他堆叠上下文中，并共同创建堆叠上下文的层次结构。
  • 每个堆叠上下文完全独立于其兄弟元素：处理堆叠时仅考虑后代元素。
  • 每个堆叠上下文都是自包含的：在元素的内容被堆叠之后，整个元素被认为是父堆叠上下文的堆叠顺序。 -MDN
于 2013-06-08T15:24:20.033 回答
1

更改z-index: 0;为z-index: -1;for #overlayinner。jsfiddle.net/9Rj9V/1

于 2013-06-08T15:13:52.863 回答