Javascript 如何使用react在后台添加svg图像？

我试图在这个登录页面中添加SVG作为背景图像（下面是代码和预览）。但我不知道怎么做，我只知道

但是这会在我的文本上方添加SVG，而我希望在文本后面添加SVG。我该怎么做？ 这里我发送我的react代码和SVG文件

这是App.js `

这是Form.js

    import React from 'react';

import './form.css';


export default class NameForm extends React.Component {


    render() {
      return (
        <div className="container">
        <div className="email">
        <form>
          <label>
           <input type="email" placeholder="Enter your email" />
          </label>
          </form>
          </div>
          <div className="password">
              <form>
              <label>
           <input type="password" placeholder="Passowrd" />
          </label>
              </form>
          </div>
          <div className="btn">
              <input type="submit" value="Login" />
          </div>
          <h5>Don't have an account?<a href='/'>Register now</a></h5>
        </div>
      );
    }
  }

这是我的背景

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2205.482 1074.229">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }

      .cls-2, .cls-3 {
        fill: #fff;
      }

      .cls-3 {
        opacity: 0.1;
      }
    </style>
    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#38e870"/>
      <stop offset="1" stop-color="#b8d3c1"/>
    </linearGradient>
  </defs>
  <g id="background" transform="translate(406.74)">
    <rect id="Rectangle" class="cls-1" width="1440" height="1024"/>
    <g id="Group_7" data-name="Group 7">
      <path id="Path_2" data-name="Path 2" class="cls-2" d="M16.434,89.884S165.309-.9,292.055,89.442s263.46-2.409,263.46-2.409,218.275-191.988,429.309-5.67,347.458-7.4,347.458-7.4,149.887-122.7,344.608-4.262,10.5-1.535,10.5-1.535V289.655H0Z" transform="translate(-76.54 777.598)"/>
      <path id="Path_2_Copy" data-name="Path 2 Copy" class="cls-3" d="M1953.62,115.161S1787.41-1.154,1645.9,114.6s-294.148-3.086-294.148-3.086-243.7-245.979-479.313-7.266S484.51,94.76,484.51,94.76,317.16-62.453,99.758,89.294s-11.719-1.967-11.719-1.967V371.111H1971.97" transform="translate(-173.23 703.118)"/>
      <path id="Path_2_Copy_2" data-name="Path 2 Copy 2" class="cls-3" d="M20.52,136.446s185.9-137.813,344.165-.671,328.979-3.656,328.979-3.656,272.556-291.441,536.071-8.609S1663.6,112.268,1663.6,112.268,1850.76-74,2093.91,105.8s13.107-2.33,13.107-2.33V439.7H0Z" transform="translate(-406.74 627.553)"/>
    </g>
  </g>
</svg>

.cls-1{
填充：url（#线性渐变）；
}
.cls-2、.cls-3{
填充：#fff；
}
.cls-3{
不透明度：0.1；
}

请告诉我如何在stripe.in或任何其他网站的背景中添加此SVG。

---

谢谢

将以下代码添加到css文件中：

.your_elements_class{
  background-image: url("your_image_address.svg");
}

---

将以下代码添加到css文件中：

.your_elements_class{
  background-image: url("your_image_address.svg");
}

---

要添加背景，请使用

background image

CSS属性-要添加背景，请使用

background image

CSS属性-好的，因此我需要先创建一个div类，然后在同一类的CSS中添加背景图像组件。我说的对吗？好的，我需要先创建一个div类，然后在同一个类的css中添加背景图像组件。我说得对吗？

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2205.482 1074.229">
  <defs>
    <style>
      .cls-1 {
        fill: url(#linear-gradient);
      }

      .cls-2, .cls-3 {
        fill: #fff;
      }

      .cls-3 {
        opacity: 0.1;
      }
    </style>
    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#38e870"/>
      <stop offset="1" stop-color="#b8d3c1"/>
    </linearGradient>
  </defs>
  <g id="background" transform="translate(406.74)">
    <rect id="Rectangle" class="cls-1" width="1440" height="1024"/>
    <g id="Group_7" data-name="Group 7">
      <path id="Path_2" data-name="Path 2" class="cls-2" d="M16.434,89.884S165.309-.9,292.055,89.442s263.46-2.409,263.46-2.409,218.275-191.988,429.309-5.67,347.458-7.4,347.458-7.4,149.887-122.7,344.608-4.262,10.5-1.535,10.5-1.535V289.655H0Z" transform="translate(-76.54 777.598)"/>
      <path id="Path_2_Copy" data-name="Path 2 Copy" class="cls-3" d="M1953.62,115.161S1787.41-1.154,1645.9,114.6s-294.148-3.086-294.148-3.086-243.7-245.979-479.313-7.266S484.51,94.76,484.51,94.76,317.16-62.453,99.758,89.294s-11.719-1.967-11.719-1.967V371.111H1971.97" transform="translate(-173.23 703.118)"/>
      <path id="Path_2_Copy_2" data-name="Path 2 Copy 2" class="cls-3" d="M20.52,136.446s185.9-137.813,344.165-.671,328.979-3.656,328.979-3.656,272.556-291.441,536.071-8.609S1663.6,112.268,1663.6,112.268,1850.76-74,2093.91,105.8s13.107-2.33,13.107-2.33V439.7H0Z" transform="translate(-406.74 627.553)"/>
    </g>
  </g>
</svg>

.your_elements_class{
  background-image: url("your_image_address.svg");
}