在固定圖像上使用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作爲蒙版

回答

相關問題