Question

当前，在滚动时，标题二和标题三的标题不显示。如何在保持h1标题和背景固定的同时，如何使每个标题显示在其滚动背景上？

.parallax {
      height: 100vh;
      display:flex;
      align-items: center;
      position:relative;
    }

    .bg1 {
      background-attachment: fixed;
      background-image: url('https://source.unsplash.com/random');
        background-size: cover;
    }

    .bg2 {
      background-attachment: fixed;
      background-image: url('https://placekitten.com/g/800/600');
        background-size: cover;
    }

    .bg3 {
      background-attachment: fixed;
      background-image: url('https://unsplash.it/1200/800');
        background-size: cover;
    }

    h1 {
      position:fixed;
      background: rgba(255,255,255,0.7);
      margin-left: 45px;
      padding: 10px 20px;
    }

<section class="parallax bg1">
    <h1>Heading One</h1>
  </section>
  <section class="parallax bg2">
    <h1>Heading Two</h1>
  </section>
<section class="parallax bg3">
    <h1>Heading Three</h1>
</section>

Answer 1

只需将h1位置属性更改为relative :)

H1标签隐藏在固定背景滚动条上

1 个答案: