添加 SVG 元素并使其具有响应性

Question

我无法将 SVG 波形图片添加到我的背景中，同时也使其响应。我正在尝试将波浪添加到我预先存在的背景图像中，以使其看起来更具吸引力。虽然我成功添加了一个，但我很快意识到，如果我放大网站，我最新添加的内容非常时髦。任何人都可以在这里分享一些想法/代码来帮助我吗？

我已经尝试过的

我在发布之前做了我的研究。我查看了之前在 Stackoverflow 上发布的问题，并尝试复制提供的想法，但没有成功。我在下面发布的代码中证明了这一点。

以下是我的代码的 sn-p。

HTML

这是我正在尝试使用的代码部分。

<section class="site-title">
            <div class="site-background">
                <h1>Who Am I?</h1>

                <h2>I am a 
                <span class="txt-type" data-wait = "5000" data-words = '["example", "example"]'></span>
            </h2>

            <div class = "svg">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="#ffffff" fill-opacity="1" d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>
            </div>
</section>

        <!-- Site title.-->


        <!-- Blog posts Carousel. -->
        <section class = "space">
            <div class = "empty"></div>
        </section>

CSS

/* Site Title */

main .site-title{
    background: url(../assets/Wallpaper-2.jpg);
    background-size: cover;
    height: 110vh;
    display: flex;
    justify-content: center;
}

main .site-title .svg{
    padding-top: 144px;
    width: 100%;

}

main .site-title .site-background{
    padding-top: 10rem;
    text-align: center;
    color: white;
    padding-top: 24px;
}

html,body{
    margin: 0%;
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

Answer 1

如果您将 SVG 视为背景会更容易：

.site-title {
  background: 
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto,
    url(https://picsum.photos/id/10/800/800) center/cover;
  background-repeat:no-repeat;
  height: 90vh;
  display: flex;
  justify-content: center;
}

.site-title .site-background {
  padding-top: 10rem;
  text-align: center;
  color: white;
  padding-top: 24px;
}

<section class="site-title">
  <div class="site-background">
    <h1>Who Am I?</h1>

    <h2>I am a
      <span class="txt-type" data-wait="5000" data-words='["example", "example"]'></span>
    </h2>
  </div>
</section>

您也可以将其视为mask，您将具有透明度：

.site-title {
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto no-repeat,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
          mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1420 320" preserveAspectRatio="xMidYMid meet"><path fill="white"  d="M0,224L120,240C240,256,480,288,720,266.7C960,245,1200,171,1320,133.3L1440,96L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"></path></svg>') bottom/100% auto no-repeat,
    linear-gradient(#fff,#fff);
          mask-composite:exclude;
  height: 90vh;
  display: flex;
  justify-content: center;
}

.site-title .site-background {
  padding-top: 10rem;
  text-align: center;
  color: white;
  padding-top: 24px;
}

body {
  background:pink;
}

<section class="site-title">
  <div class="site-background">
    <h1>Who Am I?</h1>

    <h2>I am a
      <span class="txt-type" data-wait="5000" data-words='["example", "example"]'></span>
    </h2>
  </div>
</section>