如何在旋转图像CSS或Javascript时使背景图像填充空白（在div上）？

用户名

#main-image-div {
    background-repeat: repeat;
    overflow: hidden;
    background-image: url(https://as1.ftcdn.net/jpg/00/87/77/88/1000_F_87778829_SUQcfXnnxAvOJDMZBApGuDCh75lb7mIP.jpg);
    background-size: 200px;
    transform: translate3d(0px, 0px, 0px) scale(1, 1) rotate3d(0, 0, 1, 45deg);
}

我正在通过文本框更改图像的背景大小，还通过按钮将其转换更改为所有类型的旋转。该图像水平放置时会覆盖所有空白，但是在旋转时会创建空白。如何在div上用相同的图像填充这些空白（而不是缩放比例，我想在空白区域上填充相同大小的背景大小的瓷砖。我整天尝试过，但无法解决。请帮忙在此感谢。

陪同Afif

您可以尝试如下操作：

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width:141vmax;
  height:141vmax;
  background-size: 200px;
  background-image: url(https://as1.ftcdn.net/jpg/00/87/77/88/1000_F_87778829_SUQcfXnnxAvOJDMZBApGuDCh75lb7mIP.jpg);
  transform: rotate(45deg) translateY(-50%);
  transform-origin:top left;
}

使用div：

.box {
  height:300px;
  margin:50px;
  border:1px solid;
  overflow:hidden;
  position:relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width:141vmax;
  height:141vmax;
  background-size: 200px;
  background-image: url(https://as1.ftcdn.net/jpg/00/87/77/88/1000_F_87778829_SUQcfXnnxAvOJDMZBApGuDCh75lb7mIP.jpg);
  transform: rotate(45deg) translateY(-50%);
  transform-origin:top left;
}