如何在HTML元素的居中背景图像上添加填充

Question

现在我正在这样做：

html {
  width: 100%;
  height: 100%;
  background: url(/icon.png) center center no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  padding: 100px;
}

我们说图像为3000x1500px。我希望它以100px的填充居中，并希望它按比例缩小图像，使其适合居中（垂直和水平）。现在，填充什么也没做，我认为图像被剪裁得太大了。我也不想使用<img>元素，而只在CSS中使用background-image。

Answer 1

此更新的CSS可以解决您的问题（我相信这对您有用）

html{
  margin:0px;
  padding:0px;
}
body{
  width: 100vw;
  height: 100vh;
  background: url(https://picsum.photos/1200/1200?image=0) center center no-repeat;
  box-sizing: border-box;
  background-origin: content-box;
  background-clip: content-box;
  background-size:calc(100% - 100px) calc(100% - 100px);
  margin:0px;
}