背景图像未从无花果设计中显示

Question

以下是一个figma，是试图转换为一个反应组件，我遇到的问题是蓝色背景（这是一个图像），请您查看并告诉我我的代码可能是错误的，我曾尝试过背景属性和背景图像属性，但两者都无法正常工作，我正在考虑使用所有部门的z索引，但这不会成为处理它的专业方式。

这是我的代码

import React from "react";
import styled from "styled-components";
import Rectangle233 from "../images/Rectangle 233.png";
import Rectangle234 from "../images/Rectangle 234.png";
import Rectangle236 from "../images/Rectangle 236.png";
import Subtitle2 from "../theme/Subtitle2.styled";
import Body2 from "../theme/Body2.styled";
import Button from "../theme/Button.styled";

const DevelopSec = styled.div`
  margin-top: 10.3rem;
  width: 192rem;
  height: 111rem;
  background: url(${Rectangle234});
  background-size: cover;
`;

const Dev1 = styled.div`
  display: flex;
  margin-left: 34.5rem;
`;

const DevImage1 = styled.div``;

const DevText1 = styled.div`
  margin-left: 7rem;
  margin-top: 16rem;
`;

const DevHeader1 = styled.div``;

const DevParag1 = styled.div`
  margin-top: 1.3rem;
  width: 48rem;
`;

const DevBt1 = styled.div`
  margin-top: 3.9rem;
`;

const Dev2 = styled.div`
  display: flex;
  margin-top: 5.5rem;
`;

const DevImage2 = styled.div``;

const DevText2 = styled.div`
  margin-left: 62rem;
  margin-top: 6.2rem;
`;

const DevHeader2 = styled.div``;

const DevParag2 = styled.div`
  margin-top: 1.3rem;
  width: 48rem;
`;

const DevBt2 = styled.div`
  margin-top: 3.9rem;
`;

const Develop = () => {
  return (
    <DevelopSec>
      <Dev1>
        <DevImage1>
          <img src={Rectangle236} alt="Rec236" />
        </DevImage1>
        <DevText1>
          <DevHeader1>
            <Subtitle2>
              Develop
              <br /> Without Limits
            </Subtitle2>
          </DevHeader1>
          <DevParag1>
            <Body2>
              WooCommerce is developer friendly, too. Built with a REST API,
              WooCommerce is scalable and can integrate with virtually any
              service. Design a complex store from scratch, extend a store for a
              client, or simply add a single product to a WordPress site—your
              store, your way.
            </Body2>
          </DevParag1>
          <DevBt1>
            <Button var="containedSecondary" size="md">
              Read the Documentation
            </Button>
          </DevBt1>
        </DevText1>
      </Dev1>
      <Dev2>
        <DevText2>
          <DevHeader2>
            <Subtitle2>
              Know our
              <br /> Global Community
            </Subtitle2>
          </DevHeader2>
          <DevParag2>
            <Body2>
              WooCommerce is one of the fastest-growing eCommerce communities.
              We’re proud that the helpfulness of the community and a wealth of
              online resources are frequently cited as reasons our users love
              it. There are 80+ meetups worldwide!
            </Body2>
          </DevParag2>
          <DevBt2>
            <Button var="containedSecondary" size="md">
              Read the Documentation
            </Button>
          </DevBt2>
        </DevText2>
        <DevImage2>
          <img src={Rectangle233} alt="Rec233" />
        </DevImage2>
      </Dev2>
    </DevelopSec>
  );
};

export default Develop;

，下面是图像

Answer 1

我们在寻找什么课？您必须更准确地指出我们。您的进口空间。取出这些，如果那不起作用，请尝试更改背景大小一秒钟以查看是否改变了任何东西，我发现有时会表现出一些奇怪的事情。