隐藏图像/背景颜色下方的文本

Question

我在jade-中有我的徽标（div中的图像）

style="opacity:1;filter:alpha(opacity=100);display:block;border-bottom: thick solid #000000;background:rgba(255, 255, 255, .8)"

此div位于页面顶部，报告显示为主要内容。我正在使用stickyjs将徽标固定在页面上滚动。但是，当我向下滚动时，徽标背后的页面内容不会被隐藏，并且在图像后面显示为文本，

如何设置background-color的选项，隐藏位于下方的文本内容？

Answer 1

好的，不知道你的网站架构，这里有你可以做的样本...

Working CodePen Demo

HTML

<div id="main">
  <div id="header">
    <img src="http://www.myiconfinder.com/uploads/iconsets/256-256-1c93adf1d2e3c02dcb629a40fb065e81.png" />
  </div>
  <div id="content">
    <p>This is the body content.</p>
    ...
    <p>
    <p>This is the body content.</p>
  </div>
</div>

CSS

#header {
  height: 60px;
  width: 100%;
  position: fixed;  /* Keeps the header fixed at the top of the page */
  top:0;
  z-index: 10;
  background-color: #fff;   /* opaque background to hide text */
  margin: 0;
  padding: 0;
}
#header img {
  height: 100%;
}
#content {
  position: absolute;   /* begin content beneath header */
  top: 55px;
  z-index: -1;          /* hide the body text */
}

您不需要JS来修复页面顶部的标题。我建议简化并使用CSS定位，以确保标题栏保持在页面顶部。