转换为React组件的SVG图像如何用作背景图像？

Question

在我的Gatsby网站上，我打算使用一些动画背景，所以我得到了SVG图像，将它们转换为React组件，并使用Framer Motion对SVG的某些组进行了动画处理。 结果非常出色：将动画作为独立组件添加到页面后，它们可以完美显示，但是如何将它们用作div或section的背景呢？

以下是组件之一：

git status

提前谢谢！

Answer 1

实际上，它们不需要与CSS一起作为背景使用，以使用户的行为像背景一样。

创建一个父容器（例如div）以包装要为其设置背景的内容：

<div>
  <YourSVGComponent />
  <div>Your content</div>
</div>

将父级设置为position: relative（即创建一个新的定位上下文），将SVG样式设置为以下形式：

position: absolute;
z-index: 1;
pointer-events: none; 
top: 0;
right: 0;
bottom: 0;
left: 0;

然后，我还建议在内容position: relative; z-index: 2上设置div，以确保它按堆叠顺序显示在SVG上方。

这不支持background-repeat或background-position之类的CSS属性，但是如果需要，您可以根据具体情况来解决。