要实现背景和文本的CSS颜色过渡，可以使用CSS的过渡属性（transition）和伪元素（::before和::after）来实现。

下面是一个示例代码：

HTML代码：

  
这是一个文本示例

CSS代码：

.color-transition {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  overflow: hidden;
}

.color-transition::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00ff00;
  opacity: 0;
  transition: opacity 1s, background-color 1s;
}

.color-transition:hover::before {
  opacity: 1;
  background-color: #0000ff;
}

.color-transition p {
  position: relative;
  z-index: 1;
  color: #ffffff;
  transition: color 1s;
}

.color-transition:hover p {
  color: #000000;
}

在上面的代码中，我们使用了一个带有class为"color-transition"的容器来包含文本。通过设置容器的背景色为红色，并设置伪元素::before的背景色为绿色。在伪元素::before上设置了opacity属性为0，表示初始状态下不可见。当鼠标悬停在容器上时，通过设置伪元素::before的opacity属性为1，使其显示出来，并且同时改变背景色为蓝色。

对于文本颜色的过渡，我们设置了文本的初始颜色为白色，并在鼠标悬停时将文本颜色改为黑色。

通过设置transition属性，我们将过渡效果的持续时间设置为1秒。

这样，当鼠标悬停在容器上时，背景和文本颜色都会平滑地过渡到设定的目标颜色。