隐藏 image/background 颜色下方的文本

Question

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

中具有这些属性

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 来修复页面顶部的 header。我建议简化并使用 CSS 定位以确保 header 栏位于页面顶部。

隐藏 image/background 颜色下方的文本

Hide text underneath the image/background color

javascript

jquery

css

sticky