CSS把八张图片变成背景能轮播并且能插入文字

可以使用CSS3的动画和伪类来实现这个效果。首先，将八张图片排成一行，然后设置一个容器来包含它们，并将容器的宽度设置为图片的宽度乘以八。接着，将这八张图片作为一个背景图设置给容器，然后使用CSS3的动画来使其轮播。最后，使用伪类来插入文字。

具体实现步骤如下：

1. HTML结构

<div class="container">
  <div class="bg-image"></div>
  <div class="text">这是插入的文字</div>
</div>

2. CSS样式

.container {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.bg-image {
  width: 800%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url(图片地址) 0 0 repeat-x;
  animation: move 40s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-700%);
  }
}

.text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

3. 解释说明

上面的代码中，我们首先定义了一个容器 `.container`，它的宽度为100%，高度为500px，用来容纳我们的背景图和插入的文字。然后，我们定义了一个背景图 `.bg-image`，它的宽度为图片宽度的8倍，高度为容器高度，使用了background属性来设置背景图，并使用了animation属性来设置背景图的轮播动画。最后，我们使用伪类 `.text` 来插入文字，设置了文字的位置和样式。

需要注意的是，上面的代码中使用了CSS3的动画属性，需要加上浏览器前缀以保证兼容性。另外，在使用伪类插入文字时，需要注意设置伪类的content属性来显示文本内容。

希望这个回答能够解决你的问题。