Question

我需要实现的设计有一个图像（我把它作为div背景图像），在该图像的顶部有一个具有一定程度不透明度的渐变叠加，最重要的是会有一些文本，应该是白色的并且在前面（不透明度1）。

我无法将文字带到前面。可以这样做吗？我也尝试过使用不同的z索引，但无论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/

具有渐变叠加的图像，但文本应该在前面（没有不透明度）

1 个答案: