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，就会再次隐藏溢出，无论嵌套的标头位置如何，图像都可见。

我该如何解决？

编辑： devel代码可见here。我基本上都有每个部分标题背后的图像，不要在页面上留下痕迹，只是让部分的标题在你流口水时显露出来

Answer 1

如果我理解您想要的效果，您可能需要使用img作为背景;试试这个：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Jsfiddle Demo

Answer 2

相对定位的父级position:absolute个孩子会忽略溢出。

解决问题的一种方法是.section-header position:absolute或position:fixed。（对你最有用的）。

像这样：

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

see this jsfiddle

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

2 个答案: