Question

我想将常见问题解答放在此灰波SVG的顶部。如图所示，“常见问题”将位于SVG上方，而其他文本仍位于其下方（例如，如果FAQ问题周围有一个方框，我只想向上移动它）。有办法吗？

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
        <!--FAQ accordian-->
        <section>
          <div class="container faq">
            <h2 class="header-h2">Frequently Asked Questions</h2>
            <div class="row">
              <div class="col">
                <div class="faq-question">
                  <h5>How much does it cost?</h5>
                  <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>                 
                </div>
                <div class="faq-question">
                  <h5>What will you do with Lorem?</h5>
                </div>
              </div>
              <div class="col">
                <div class="faq-question">
                  <h5>What is the difference between the free and premium plans?</h5>
                  <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
                </div>
              </div>
            </div>
          </div>
        </section>

当前：

Answer 1

您可以为svg（绝对/固定）设置一个职位，并给它一个z-index:-1，也可以为.faq设置一个职位，并给它一个{{1} }

Answer 2

您可以给svg一个类，并以-1的z-index绝对将其放在顶部，然后相应地分隔标题h2。

.hero {
  position: absolute;
  top: 0;
  z-index: -1;
}

.header-h2 {
  margin: 80px 0;
}

<svg class="hero" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
  <div class="container faq">
    <h2 class="header-h2">Frequently Asked Questions</h2>
    <div class="row">
      <div class="col">
        <div class="faq-question">
          <h5>How much does it cost?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
        </div>
        <div class="faq-question">
          <h5>What will you do with Lorem?</h5>
        </div>
      </div>
      <div class="col">
        <div class="faq-question">
          <h5>What is the difference between the free and premium plans?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 3

* {
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 240px;
  width: 100%;
  z-index: -1;
}

.header-h2 {
  font-family: sans-serif;
  font-size: 3vw;
  padding: 1.5%;
}

.row {
  display: flex;
  justify-content: space-around;
  padding-top: 120px
}

.col {
  max-width: 500px;
  padding: 3%;
}

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 320"><path fill="#f6f6f8" fill-opacity="1"   d="M0,128L40,117.3C80,107,160,85,240,96C320,107,400,149,480,186.7C560,224,640,256,720,261.3C800,267,880,245,960,229.3C1040,213,1120,203,1200,218.7C1280,235,1360,277,1400,298.7L1440,320L1440,0L1400,0C1360,0,1280,0,1200,0C1120,0,1040,0,960,0C880,0,800,0,720,0C640,0,560,0,480,0C400,0,320,0,240,0C160,0,80,0,40,0L0,0Z"></path></svg>
<!--FAQ accordian-->
<section>
  <div class="container faq">
    <h2 class="header-h2">Frequently Asked Questions</h2>
    <div class="row">
      <div class="col">
        <div class="faq-question">
          <h5>How much does it cost?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem</p>
        </div>
        <div class="faq-question">
          <h5>What will you do with Lorem?</h5>
        </div>
      </div>
      <div class="col">
        <div class="faq-question">
          <h5>What is the difference between the free and premium plans?</h5>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
</section>

SVG：如何在svg顶部放置文本？

3 个答案: