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

时间:2015-06-02 00:41:19

标签: javascript jquery css sticky

我在jade -

中有我的徽标(div中的图像)

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

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

enter image description here

如何为background-color设置选项,以隐藏位于下方的文字内容?

1 个答案:

答案 0 :(得分: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定位,以确保标题栏位于页面顶部。