html - 在固定图像上使用 div 作为 mask

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 ，溢出不再隐藏，图像可见，无论它嵌套在标题的位置如何。

我该如何解决？

编辑: 开发代码可见here .我基本上在每个部分的标题后面都有图像，而不是在页面上滚动，只是让该部分的标题在您滚动时显示它

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 Demo