时间戳

首页 > 解决方案 > 有没有办法将背景图像中心定位到精确坐标？

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

问题描述

我在正文中有一个背景图片，svg 普通圆圈。

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

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

任何人都可以帮忙吗？

这是来自 codepen.io 的链接： 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;
}

标签： htmlcsscoordinatesbackground-imagebackground-position

解决方案

要结合您可以使用的相对和绝对尺寸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;
}

推荐阅读