在固定图像上使用 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，溢出就不再被隐藏，并且无论 header 的位置如何，图像都是可见的嵌套在.

我该如何解决？

编辑：开发代码可见 here。我基本上让每个部分标题后面的图像不随页面滚动，只是让该部分的 header 在你滚动时显示它

Answer 1

相对定位的父项中的 position:absolute 个子项忽略溢出。

解决问题的一种方法是也给 .section-header 一个 position:absolute 或 position:fixed。（以对您最有用的为准）。

像这样：

.section-header
{
    width:            100%;
    height:           192px;
    overflow:         hidden;
    position:         absolute;
}

see this jsfiddle

Answer 2

如果我理解你想要的效果，你可能需要使用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

在固定图像上使用 div 作为遮罩

Use a div as a mask over a fixed image

html

css

css-position

overflow