有没有办法将背景图像中心定位到精确坐标？

Question

我在body里有一张背景图，svg普通圆

At background-position: 0%, 0% 这个圆出现在页面的左上角。但我希望这个圆圈的 center 正好在 0,0（左上角）并保持在那里，无论设备宽度如何。

我可以使用负百分比或负像素或 em/rem 手动将它居中，但当我更改浏览器宽度时它不会停留在那里。

有人可以帮忙吗？

这是来自 codepen.io 的 link： https://codepen.io/sandro-bochorishvili/pen/KKMjezN

实际代码： css

body {
  overflow-y: scroll;
  height: 100vh;
  background-color:  hsl(185, 75%, 39%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(https://svgshare.com/i/Rfg.svg),
                    url(https://svgshare.com/i/RgK.svg);
  background-position: -20rem -34rem, 72em 15em;

  background-repeat: no-repeat, no-repeat;
  padding: 0 2em 0 2em;
}

Answer 1

要组合相对和绝对维度，您可以使用 calc，在您的情况下它将是 background-position: -20rem -34rem, calc(100% + 20rem) calc(100% + 34rem);

body {
  overflow-y: scroll;
  height: 100vh;
  background-color:  hsl(185, 75%, 39%);
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(https://svgshare.com/i/Rfg.svg),
    url(https://svgshare.com/i/RgK.svg);
 background-position: -20rem -34rem, calc(100% + 20rem) calc(100% + 34rem);

  background-repeat: no-repeat, no-repeat;
  padding: 0 2em 0 2em;
}

有没有办法将背景图像中心定位到精确坐标？

Is there a way to position background image center to exact coordinates?

html

css

background-image

coordinates

background-position