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

【问题标题】：How do I make the background image to fill the white spaces (on div) while rotating the image CSS or Javascript?如何在旋转图像 CSS 或 Javascript 时使背景图像填充空白（在 div 上）？
【发布时间】：2020-10-08 10:00:11
【问题描述】：

#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 上用相同的图像填充那些空白（而不是缩放，我希望在空白处填充相同的背景大小的图块。我尝试了一整天，我无法解决它。请帮助在此感谢。

【问题讨论】：

哪些空格？无论旋转如何，div 都是方形的
背景图片放在名为#main-image-div的div id下，并且在这个或父div之外还有另一个div，我也在那里添加了overflow:hidden，所以#main-image- div 不会显示在父 div ID 之外。所以父 div ID 有那些空格，因为我旋转了它的子 div。我希望父 div 填充具有相同背景大小的相同图像或我从文本框生成的任何图像。有可能吗？
当然，您可以让父 div 具有相同的背景图片 - 但不会旋转

标签： javascript jquery css

【解决方案1】：

您可以尝试如下：

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;
}

<div class="box">

</div>

【讨论】：

不确定 OP 框中是否有内容，您需要将 z-index:-1; 添加到 :before CSS 以便任何内容可见 - 顺便说一句，做得很好，我认为这是将是不可能的：p 总是忘记:before 和:after 的力量！
谢谢你的努力，我想知道当旋转90度时，它会产生空白，这个问题可以解决吗？
@user3751835 90deg 是另一回事，请查看：stackoverflow.com/a/51742059/8620333 ... 没有针对所有角度的通用解决方案，我们需要具体处理每个角度
嘿，你知道我是否可以使用 background-size 和 background-repeat 来显示仅在 img 标签中重复的一张图像。目前我可以在我的 div 上做到这一点，我想知道是否可以单独使用 img 标签？

【解决方案2】：

您可以将#main-image-div 的背景颜色设置为某种颜色...它目前正在继承它看起来像

【讨论】：

patterndesigns.com/api，如果你向下滚动并查看他们的演示，他们有缩放和旋转。我正在尝试实现类似的目标。所以我尝试通过文本框使用背景大小，还尝试使用按钮进行缩放、旋转。但是，它会创建一个空格。