html - 带有渐变叠加的图像，但文本应在前面（无不透明度）

Question

我需要实现的设计有一个图像（我将其作为 div 背景图像），在该图像的顶部有一个具有一定程度不透明度的渐变叠加层，在此之上会有一些文本，应该是白色的和前面（不透明度 1）。

我无法将文本放在前面。这可以做到吗？我也尝试过放置不同的 z-index，但无论 z-index 是什么，文本也会显得不透明。

<div class="background">
 <div class="blue-gradient opaque">
   <div class="page-title-div front">
     <h1>This text goes to front and is white</h1>
   </div>
 </div>
</div>

CSS：

.background {
  background-image: url('../img/back.png');
}
.blue-gradient {
  background-image: radial-gradient(circle farthest-corner at center, #15497E 0%, #3D93BC 100%);
}
.opaque {
  opacity: 0.7;
}
.front{
  opacity: 1;
}

Answer 1

解决方案是正确嵌套元素并使用位置标签。

<div class="background">
    <div class="blue-gradient"></div>    
    <h1>This text goes to front and is white</h1>
</div>

CSS

.background {
    position: absolute;
    height: 100%;
    width: 100%;
    display: block;
    background-image: url('http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cute-Cats-cats-33440930-1280-800.jpg');
}
.blue-gradient {
    width:100%;
    height: 100%;
    position:absolute;
    opacity: 0.7;
    background-image: radial-gradient(circle farthest-corner at center, #15497E 0%, #3D93BC 100%);
}
h1 {
    position:relative;
    color:#fff;
}

小提琴：http: //jsfiddle.net/9tN35/