我的div的背景图片很大。我可以使用background-position: {x}% {y}%（0-100）和background-size:{z}%（100-200）平移和缩放该图像。在此div上方，我想放置几个标记。 当背景图像位置改变时，如何计算这些标记的位置？

我正在使用Svelte，并且在这里https://svelte.dev/repl/ec926f6014a447b18a9f599b81e0f8cd?version=3.12.1

  const pulsePos = (d,x,y,z) => {

  /// x,z == background image positions (%)
  /// d == object with marker position (%)

       const xpos = d.x * z;
       const ypos = d.y * z;
       return {x:xpos,y:ypos}
  };

标记看起来像这样。

    <div
      class="pulse"
      style={` 
      transform: translate(${pulsePos(position,z).x}%,${pulsePos(position,z).y}%);
      `} />

背景图片

 <div
    style="background-image:url({url}); background-position: {x}% {y}%;
    background-size:{z}%; transition: all {duration}s linear;"
    class="imageHolder"/>

如果我将标记位置乘以背景大小值，则可以使标记在“缩放”时保持在原位。但是我不知道在更改背景位置时如何使标记跟随背景图像。 我迷路了！