Question

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

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

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

到目前为止，我的方法是使用以下代码在<main>上设置背景图片：

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;
}

但是它有两个主要问题：

首先，即使我实际上仅从“ B部分”开始，也必须从<main>的开头开始放置背景图片。
第二，这是最大的问题，我可以像上面一样将图像绝对放置在背景位置，但是缩放比例很差。我的图像位置不正确或比例不合适。

编辑：沙盒链接在https://codesandbox.io/s/blissful-frost-ste6y

响应式SVG背景图片

0 个答案: