html - 如何将文本放在图案叠加层 CSS 之上

Question

可能很简单，但无法让它发挥作用。我已经成功地用图案覆盖背景图像，但现在标题也放在图案后面。我已经尝试使用 z-index(如下面的代码所示)，但它仍然无法正常工作。有什么想法吗？

结果

Index.html

<div class="content">
        <div class="subheader">
            <div class="container">
                <h1>PROVIDE <br>CREATIVITY IN <br> YOUR BUSINESS</h1>
          </div>
         <div class="pixel-overlay"></div>
      </div>
 </div>

样式.css

.content .subheader {
    width: 100%;
    height: auto;
    display: inline-block;
    padding: 130px 0 0;
    background: url(../images/landing.jpg) no-repeat 50% 0%;
    position: relative;
    background-attachment: fixed;
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-behavior: url(../js/backgroundsize.htc);
}

.content .subheader:after {
    content: "";
    background: url(../images/pattern/pattern.png) repeat;
    background-size: 90%;
    background-attachment: fixed;
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
}

.content .subheader h1 {
    margin-top: 25%;
    z-index: 100;
}

Answer 1

尝试将 position: relative; 添加到标题中，如下所示:

.content .subheader h1 {
    margin-top: 25%;
    z-index: 100;
    position: relative;
}