将乐天动画放在背景中[关闭]答案

【问题标题】：Put lottie animation in background [closed]将乐天动画放在背景中[关闭]
【发布时间】：2021-10-07 11:43:18
【问题描述】：

我不知道如何在背景中使用 Lottie 动画并在其上放置文字。

我正在使用 Svelte 以防万一。

<section>

  <div class="animation">

    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
    <lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>

    <h1>
      Title
    </h1>

    <h2>
      Text
    </h2>
  </div>
</section>

<style>
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  
  h1 {
    width: 100%;
  }
  
  h2 {
    text-align: center;
  }
</style>

我尝试使用 z-index，但没有任何改变。

【问题讨论】：

看起来您在这个问题中缺少一些代码，结构错误，没有打开的部分元素并且 h1 没有关闭，问题可能是因为尝试使用 @987654321 创建沙盒页面@ 或其他东西，以便可以适当地给出答案。无论如何，我在这里完成了这项工作codesandbox.io/s/bold-butterfly-c2y8o
我已经放在这里了codesandbox.io/s/condescending-mendel-fi2wq
太棒了，这里更新了代码：codesandbox.io/s/bold-butterfly-c2y8o希望这就是你要找的。span>

标签： html css svelte lottie

【解决方案1】：

我不知道你的意思，但希望它可以帮助你。

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
}

.title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1 {
    text-align: center;
}

h2 {
    text-align: center;
}

<section>
    <div class="animation">
        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
        <lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>

    </div>
    <div class="title">
        <h1>Title</h1>
        <h2>Text</h2>
    </div>
</section>

【讨论】：