帶透明內容的靜態背景圖片

Question

這是一個CSS大師的問題。目前的趨勢似乎是在背景中放置圖像，然後在頂部滾動一個透明內容。

AIM

什麼技術被用於產生這種結果，其中頂部含量是透明的並且在一個背景圖像的幻燈片。

http://jsfiddle.net/spadez/2uUEL/9/embedded/result/

MY未遂

我所試圖做的是應用背景，然後使頂部在它的上面是透明的。

http://jsfiddle.net/spadez/N9sCD/3/

body { 
    background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg"; 
} 
#top { 
    height: 160px; 
    opacity:0.4; 
    filter:alpha(opacity=40); 
} 
#section { 
    height: 600px; background-color: blue; 
} 

問題

如何有一個透明的div移動在靜態背景圖像在我的第一鏈路實現這個技術，我怎麼能重現它。它必須是CSS解決方案，因爲它仍然可以在沒有啓用JavaScript的情況下運行

Answer 1

這裏有一個FIDDLE

<div id="top"> 
    <span class="mask"> 
    <img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome"> 
    <a href="#">Link 3</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 1</a> 
    </span> 
</div> 

<div class="section l"> 

</div> 

<div class="section d"> 

</div> 


#top { 
    background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed; 
    background-size: cover; 
    position: relative; 
    height: 400px; 
} 
#top a { 
    background: rgba(200,200,200,0.5); 
    display: block; 
    float: right; 
    margin: 10px 15px; 
    padding: 2px 5px; 
    text-decoration: none; 
    color: #111; 
    cursor: pointer; 
    border: 2px solid #ddd; 
    border-radius: 8px; 
    transition: color 0.2s ease-in; 
} 
#top a:hover { 
    color: #fff; 
} 
.mask { 
    background: rgba(0,187,255,0.5); /* or hex combined with opacity */ 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */ 
} 
.logo { 
    position: relative; 
    width: 60px; 
    height: 60px; 
    margin: 10px; 
} 
.section { 
    height: 600px; 
} 
.l { 
    background: #ddd; 
} 
.d { 
    background: #333; 
} 

更新#top內容放在裏面.mask這消除需要z-index。

Answer 2

你在構建時基本上是正確的，但是你的CSS有一些錯誤。

body { 
    background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */ 
    background-size: cover cover; /* expands bg image to cover body */ 
} 
#top { 
    height: 160px; 
    color: #fff; /* this just makes the text visible on your dark bg */ 
} 

您不需要設置#top的不透明度，因爲沒有背景設置它已經是透明的了。

Answer 3

試試這個：

HTML - 推菜單變成自己的div

<div id="top"> 
    <div id="menu"> 
    logo 
    link 1 
    link 2 
    </div> 
</div> 
<div id="section"> 

</div> 

CSS - 去除利潤率從身體，將背景設置爲一個固定的位置，並始終覆蓋全身，加背景顏色到菜單。請注意，#top不需要透明度，因爲默認情況下它是100％透明的。如果你想獲得一張「洗過顏色」的圖像，最好是調整圖像本身，而不是嘗試重新創建顏色疊加。

body { 
    margin: 0; 
    background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed; 
    background-size: cover; 
} 
#top { 
    height: 500px; 
} 
#menu { 
    padding: 10px; 
    background-color: #fff; 
} 
#section { 
    height: 600px; background-color: blue; 
}