如何使用 CSS 旋转容器背景图像？

在 CSS 中，我们可以使用 transform 属性来旋转容器的内容或背景图像。下面是如何实现旋转容器背景图像的步骤：

步骤1：为容器设置背景图像

首先，我们需要为容器设置背景图像。可以通过 background-image 属性来实现，如下：

.container {
  background-image: url('your-image-url');
}

步骤2：为容器设置旋转变换

接下来，我们需要为容器设置旋转变换。可以通过 transform 属性来实现，如下：

.container {
  transform: rotate(45deg);
}

上述代码将会把容器旋转 45 度。你可以根据需求调整旋转角度。

步骤3：设置背景图像属性

现在，我们需要为背景图像设置一些属性，以使其可以适应旋转后的容器大小。这可以通过 background-size 和 background-position 属性来实现，如下：

.container {
  background-image: url('your-image-url');
  transform: rotate(45deg);
  background-position: center;
  background-size: cover;
}

上述代码将会使背景图像始终位于容器中心，并始终填充整个容器。

现在，你已经成功地将容器背景图像旋转了！以下是完整的 CSS 代码：

.container {
  background-image: url('your-image-url');
  transform: rotate(45deg);
  background-position: center;
  background-size: cover;
}

记得将 your-image-url 替换为你自己的图像链接。

希望以上内容能帮助你实现旋转容器背景图像。