CSS3只让背景图片旋转180度的实现示例

下面我会详细介绍实现 "CSS3只让背景图片旋转180度" 的过程：

1. 使用 transform 属性

将背景图片旋转180度最简单的方法是通过 CSS3 的 transform 属性。我们可以使用以下代码：

.background {
  background-image: url(images/bg.jpg);
  transform: rotate(180deg);
}

这段代码将背景图片旋转了180度。

2. 使用伪元素

另一个实现方法是使用伪元素来创建一个覆盖在背景图片上的元素，然后旋转它，同时保留原始背景图片，如下所示：

<div class="background"></div>

.background {
  position: relative;
  height: 200px;
  background-image: url(images/bg.jpg);
}

.background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0); /* 透明色 */
  transform: rotate(180deg);
}

在此示例中，我们创建了一个 div 元素，并在其上设置背景图片。接着，我们使用 ::after 伪元素来覆盖这个 div 元素，然后旋转它。最后，我们设置了透明的颜色，以使背景图片显示出来。

以上就是 CSS3 只让背景图片旋转180度的实现攻略。希望能对你有所帮助。