Question

有什么方法可以制作一个透明的标题和多个div容器，并且不在透明标题下显示它们？（如果标题为50像素->内容“停止”显示其是否达到前50像素）

无法为标题提供与其余标题相同的背景图像，并且无法更改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; }

Answer 1

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

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

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

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

1 个答案: