css - 无法让文本内容位于屏蔽 div 之上

Question

我有一个带有背景图像的 div，应该用 mask 效果覆盖。在那个 div 上应该有一些内容。我正在尝试让内容覆盖 mask ，但由于某种原因它不起作用。 我添加了一个 jsFiddle:

http://jsfiddle.net/FHt9d/

代码如下:

HTML:

<div id="container">
    <div id="mask"></div>
    <div id="content"><h1>This is a header</h1></div>
</div>

CSS

#container
{
    width: 100%;
    height: 246px;
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/d/d8/Skyline_oklahoma_city.JPG')    
}

#mask
{
    z-index: 1;
    height: 100%;
    width: 100%;
    background-color: rgba(75,139,228,.8);
    position: absolute;
    top: 0;
    left: 0;
}

#content h1
{
    z-index:2;
    font-size: 32;
    color: #fff;

}

文本不应被掩码覆盖。任何帮助将不胜感激，

谢谢!

Answer 1

试试这个(你错过了一个 position: relative;):

#content h1 {
   color: #FFFFFF;
   position: relative; //missed
   z-index: 2;
}