在其他透明内容下隐藏透明内容？

Question

Is there any way to make a transparent header and multiple div containers and don't show them under the transparent header?有什么方法可以制作透明标题和多个 div 容器，并且不在透明标题下显示它们？ (If the header is 50px -> content 'stops' showing if it gets to top 50px) （如果标题是 50 像素 - > 内容“停止”显示是否达到顶部 50 像素）

Giving the header the same background-image as the rest and changeing z-index isn't a possibility.为标题提供与其余部分相同的背景图像并更改 z-index 是不可能的。

The header shouldn't get darker when i scroll the content into it.当我将内容滚动到其中时，标题不应变暗。 watch here看这里

    <body>

  <header>
    header
  </header>
  <main>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <div class="content">

    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


  </main>
  <footer>footer</footer>
</body>

css css

 html {
  height: 100vh;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0; }

body {
  margin: 0;
  width: 100%;
  background-color: yellow;
  height: 100vh; }

header {
  height: 10%;
  margin-top: 0;
  top: 0;
  position: fixed;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: auto;
  padding-bottom: auto;
  box-shadow: 0 5px 5px -5px #636363;
  z-index: 10; }
  header h1 {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 200%;
    color: #FFF;
    font-family: Verdana;
    margin-left: 5%;
    top: 50%; }

.content {
  height: 200px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5; }

footer {
  height: 10vh;
  margin-bottom: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding-top: auto;
  padding-bottom: auto;
  box-shadow: 0 -5px 5px -5px #636363;
  z-index: 10; }

Answer 1

Have you tried adding another div in between via z-index CSS?您是否尝试过通过 z-index CSS 在两者之间添加另一个 div？

Or you could find the steady colour you want (with 'ColorPick Eyedropper' chrome extension if you don't have another tool) and not making the header translucent at all或者您可以找到您想要的稳定颜色（如果您没有其他工具，请使用“ColorPick Eyedropper”镀铬扩展名）并且根本不使标题半透明

Are you looking for the Roblox graphic effect where partially transparent objects are not visible behind other translucent objects?您是否正在寻找 Roblox 图形效果，其中部分透明对象在其他半透明对象后面不可见？

在其他透明内容下隐藏透明内容？

问题描述

1 个解决方案

解决方案1
0 2019-02-15 00:49:55

在其他透明内容下隐藏透明内容？

问题描述

1 个解决方案

解决方案1 0 2019-02-15 00:49:55

解决方案1
0 2019-02-15 00:49:55