Question

我在这里查看了类似的问题，但没有一个有可行的解决方案。

我希望在滚动时隐藏透明固定标题下的正文内容。以下是我现在所拥有的一个示例：https://jsfiddle.net/nukuf23L/

如果有可能我更喜欢纯CSS，但JS / JQuery也可以接受。

HTML：

<div id="main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS：

body {
margin: 0;
padding: 0;
background: url(http://etc.usf.edu/clipart/80100/80154/80154_grid_20_20_lg.gif) no-repeat center center fixed;
}

#header {
position: fixed;
z-index: 10;
background-color: rgba(0, 0, 0, .7);
width: 100%;
height: 70px;
}

#main {
background-color: rgba(255, 0, 0, .7);
height: 1000px;
position: relative;
top: 70px;
}

Answer 1

由于您的背景图像不透明，因此要做的逻辑是将图像应用于标题和正文。

由于您需要该网格图像的颜色叠加，您必须使用线性渐变应用第二个背景图像。

JSfiddle Demo

body {
  margin: 0;
  padding: 0;
  background: url(http://etc.usf.edu/clipart/80100/80154/80154_grid_20_20_lg.gif) no-repeat center center fixed;
}
#header {
  position: fixed;
  z-index: 10;
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)),      url(http://etc.usf.edu/clipart/80100/80154/80154_grid_20_20_lg.gif);
  background-repeat: ;
  no-repeat;
  background-position: center center;
  background-attachment: fixed;
  width: 100%;
  height: 70px;
}
#main {
  background-color: rgba(255, 0, 0, .7);
  height: 1000px;
  position: relative;
  top: 70px;
}

<div id="header"></div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

如何隐藏固定透明标题下的滚动内容

1 个答案: