使用div作为固定图像上的蒙版

Question

我想对我正在设计的网页进行特定的设计。

主包装包含连续的<div class='section'>和<div class='section-header'>。会section-header在图像上显示该部分的标题。

例子：

<div id="tag" class="section-header">
    <h1>Title</h1>
    <img src="assets/img/some_image.jpg">
</div>

到目前为止，我的CSS是：

.section-header
{
    width:            100%;
    height:           192px;
    overflow:         hidden;
}
.section-header > *
{
    width:            100%;
    line-height:      192px;
    margin:           0;
}
.section-header > h1
{
    position:         absolute;
    z-index:          10000;
    text-align:       center;
}
.section-header > img
{
    filter:           opacity(50%);
}

但是我想在背景图片和之间添加一些相对运动section-header。我基本上想将图像固定在屏幕上，position: fixed;然后overflow: none;完成工作。

但是，看来，一旦添加position: fixed; top: 0;到.section-header > img，溢出就不再被隐藏，并且无论嵌套标题的位置如何，图像都是可见的。

我该如何解决？

编辑：开发代码在这里可见。我基本上会在每个部分的标题后面添加图像，而不是随页面一起显示，而只是让该部分的标题在您显示时显示出来

Answer 1

如果我明白你想要的效果，你可能需要使用img作为背景；尝试这个：

body{
  background: #f3f3f3;
  height:800px;
}
div {
  text-align:center;
  color:white;
  width:80%;
  margin:150px auto;
  line-height:200px;
  background:url('http://lorempixel.com/600/600') no-repeat center;
  background-attachment: fixed;
}
div h1 {
  font-size:3em;
}

<div>
  <h1>Mytitle</h1>
</div>

Jsfiddle演示