divを固定画像上のマスクとして使用する

Question

私は設計しているウェブページに特定のデザインをしたいと思っています。

メインラッパーは、<div class='section'>と<div class='section-header'>の連続を含みます。 section-headerは、画像の上にセクションのタイトルを表示する必要があります。

exemple：

<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;に仕事をさせたいと思っていました。

すぐに私は.section-header > imgにposition: fixed; top: 0;を追加すると、オーバーフローがもはや隠されていないことを表示され、画像は関係なく、それが中にネストされていますヘッダーの位置の可視ですが。

どのように私はそれを解決できますか？

編集： develコードが表示されます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

Answer 2

相対配置された親の子どものオーバーフローは無視されます。

position:absoluteまたはposition:fixedも問題を解決する1つの方法です。 （あなたのために最も有用なもの）。このような

：

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

see this jsfiddle