html - 具有透明内容的静态背景图像

Question

这是 CSS 大师的问题。目前的趋势似乎是将图像放在背景中，然后在顶部滚动透明内容。

目标

使用什么技术来产生这种结果，其中顶部内容是透明的并在背景图像上滑动。

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

我的尝试

我尝试做的是应用背景，然后使顶部透明。

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 的需要。