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

【问题标题】：Hide transparent content under other transparent content?在其他透明内容下隐藏透明内容？
【发布时间】：2019-02-14 22:27:30
【问题描述】：

有没有办法制作一个透明的标题和多个 div 容器并且不显示在透明标题下？（如果标题是 50px -> 内容“停止”显示它是否到达顶部 50px）

不可能为标题提供与其余部分相同的背景图像并更改 z-index。

当我将内容滚动到其中时，标题不应变暗。 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

 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; }

【问题讨论】：

欢迎来到社区。您能否提供一些代码，以便我们查看您正在使用的内容？
是的，当然。

标签： html css sass background styling

【解决方案1】：

您是否尝试过通过 z-index CSS 在其间添加另一个 div？

或者您可以找到您想要的稳定颜色（如果您没有其他工具，请使用“ColorPick Eyedropper”铬扩展名）并且根本不使标题半透明

您是否正在寻找 Roblox 图形效果，其中部分透明对象在其他半透明对象后面不可见？

【讨论】：

我想用一张图片来做这件事，所以不能不让它透明。
我认为这样的 Roblox 图形效果应该可以工作。你有什么想法可以在我的代码中实现吗？
@TheRealEricCartman 图像可以具有不透明度并且是可动画的
@TheRealEricCartman 你可能需要 JQuery，这不是我的领域
@TheRealEricCartman 如果您只想要纯色，我想我可能已经解决了您的问题：codepen.io/anon/pen/VgEaLq