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

主包装包含一系列<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。我基本上有后面的每个部分的标题不会与页面双击自动滚屏，只是有部分的标题揭示了它，你双击自动滚屏

来源

2016-09-15 Amxx

不能使用IMG作为背景？你可以clariyf什么*一些相对运动*意味着......也是一个预期的输出作为一个img也许 – DaniP

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

来源

2016-09-15 16:07:07 DaniP

这是一个非常好的解决方案，但它不是非常有效的改变每个标题在HTML级别的图像。我发现一个解决方案使用剪辑：rect在一个专门的div（请参见链接） – Amxx

以及你可以很容易地改变每个容器的bg图像与nth-child或设置classnames @Amxx，我认为它更好地支持使用剪辑 – DaniP

溢出为position:absolute儿童在父母被相对定位忽略图像。

解决该问题的一种方法是给予.section-header a position:absolute或position:fixed。（以最适合您的为准）。

这样的：

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

see this jsfiddle

来源

2016-09-15 15:05:40

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

回答

相关问题