Question

我在尝试使SVG正确显示为网站背景时遇到麻烦。当前，它以小片段形式显示在网站的某个部分后面，而不是整个页面上。这里的任何帮助都非常感谢。

我制造了一个小提琴。有人可以看看吗。 https://jsfiddle.net/bp123/ku5Ln2so/7/

路径：css

.landing-background {
  position: absolute;
  top: 0;
  min-width: 100vw;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  z-index: -1;
  height: 100%;
  box-sizing: border-box;
  background-size: 1713px auto;
  background-position: center 350px;
  background-repeat: no-repeat;
}

路径：webpage

function HomePage(props) {
  return (
    <div>
      <div className="landing-background" style={{ backgroundImage: 'url(/img/background.svg)' }} />
      <Container fluid className="mt-5 mb-5 pt-5 pb-5">
        <Row className="mx-auto ">
          <Col md={10} className="mx-auto">
            <h1>My Simple Website</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare magna sed semper pulvinar. Nam laoreet orci pharetra nisl convallis malesuada.</p>
          </Col>
        </Row>
      </Container>

      <Container fluid className="mt-5 mb-5 pt-5 pb-5">
        <div className="mx-auto section-width">
          <img src="/img/ipad.png" className="ipad" alt="" />
          <img src="/img/mobile.png" className="iphoneX" alt="" />

          <div className="second-section-copy">
            <h2 className="mt-5">Lorem ipsum dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare magna sed semper pulvinar. Nam laoreet orci pharetra nisl convallis malesuada. </p>
          </div>
        </div>
      </Container>
    </div>
  );
}

Answer 1

尝试以下CSS：

.landing-background {
  background-image: url(https://r1.res.office365.com/owalanding/v2.9/images/desktop.svg);
  position: fixed;
  top: 0;
  width: 99vw;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  z-index: -1;
  height: 100%;
  box-sizing: border-box;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

我更改了此样式-position: fixed;background-size: 100% auto;background-position: center;以达到结果。

适合您的工作示例：

.landing-background {
  background-image: url(https://r1.res.office365.com/owalanding/v2.9/images/desktop.svg);
  position: fixed;
  top: 0;
  width: 99vw;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  z-index: -1;
  height: 100%;
  box-sizing: border-box;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}

<!DOCTYPE html>
<html>

<body>
  <div class="landing-background"></div>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>

</html>

希望这对您有所帮助。

拉伸SVG网页的100％高度

1 个答案: