Question

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

AIM

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

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

MY ATTEMPT

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

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;
}

静态背景图像与透明的内容

3 个答案: