Question

我有一个带有背景图像的div应该用蒙版效果覆盖。在那个div应该是一些内容。我试图让内容超过面具，但由于某种原因它无法正常工作。我添加了一个jsFiddle：

以下是代码：

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;
}

Answer 2

具有

的元素

position: absolute

始终位于顶部。同样的事情也适用于

position: fixed;

它们总是漂浮在浏览器中的元素之上。

要尽量减少这种情况，请使用

z-index: value;

对于设置了位置值的元素，您可以使用：

z-index: 1;

并为您想要超越他人的元素更改

z-index: 2; /* or more than 2 */

这将完成这项工作。

Answer 3

您错过了position: relative;上的#content h1。实际上，z-index仅适用于定位元素。

无法将文本内容置于屏蔽div之上

3 个答案: