响应式SVG背景图片

由 发布于

我有一个使用以下模式的登录页面：

<main>
  <section>Section A</section>
  <section>Section B</section>
  <section>Section C</section>
  <section>Section D</section>
</main>

这是一个很长的页面，您可以滚动并包含一些动画。我的问题如下：我有一个SVG背景图像分布在B部分和C部分中，需要缩放到一定百分比，并且也要位于某个位置。

My approach so far has been to set the background image on <main> with the following code:

main {
  background-image: url('/path/to/image.svg');
  background-position: 40% 76%;
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-origin: border-box;
  background-clip: border-box;
  background-color: #ffffff;
}

但是它有两个主要问题：

  1. First, I have to position my background image from the start of <main> even though I really only starts at "Section B"
  2. Second, which is the biggest problem, I can place my image absolutely with background position as I did above, but it scales very poorly. My image is either not at a proper position nor at a proper scale.