如何在固定透明下隐藏滚动内容header

Question

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

我想在滚动时隐藏透明固定 header 下的 body 内容。这是我现在拥有的示例：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>

如何在固定透明下隐藏滚动内容header

How to hide scrolled content under fixed transparent header

css

scroll

fixed

transparent