背景过渡效果异常：如何在setInterval中实现元素背景平滑过渡？

嘿，我明白你的问题了——现在切换背景图是瞬间完成的，想要那种几秒内慢慢过渡的效果对吧？核心原因是CSS transition不支持直接对background-image属性做过渡，因为它是离散属性，不是数值型的，所以直接切换类肯定会跳变。下面给你两种实用的解决方案：

方案一：用伪元素实现淡入淡出过渡 #

这个方法不需要额外加DOM元素，靠伪元素叠加两层背景，通过切换透明度来实现平滑效果：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c back">tz</div>

CSS #

.c {
  width: 100px;
  height: 100px;
  position: relative;
  display: block;
}
/* 第一层基础背景 */
.back {
  background-image: url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
}
/* 伪元素作为第二层背景，默认透明 */
.back2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  opacity: 0;
  transition: opacity 0.5s ease; /* 这里控制过渡时长 */
}
/* 切换类时让伪元素显示出来 */
.back2.active::after {
  opacity: 1;
}

JavaScript #

var act = true;
setInterval(function(){
  $("div").toggleClass("active");
  act = !act;
}, 10000);

方案二：用重叠的div层实现过渡 #

如果觉得伪元素不好理解，也可以直接在容器里放两个背景层，通过切换它们的透明度来实现效果，逻辑更直观：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="bg back"></div>
  <div class="bg back2"></div>
  <div class="content">tz</div> <!-- 把文字放在顶层，避免被背景遮挡 -->
</div>

CSS #

.container {
  position: relative;
  width: 100px;
  height: 100px;
}
.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease;
}
.back {
  background-image: url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
  opacity: 1;
}
.back2 {
  background-image: url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
  opacity: 0;
}
/* 切换时让第二个背景层显示 */
.back2.active {
  opacity: 1;
}
.content {
  position: relative;
  z-index: 1; /* 确保文字在最上层 */
}

JavaScript #

var act = true;
setInterval(function(){
  $(".back2").toggleClass("active");
  act = !act;
}, 10000);

补充说明 #

你原来的代码之所以没有过渡效果，是因为CSS的transition只对数值型属性生效（比如opacity、width、margin这些可以计算中间值的属性），而background-image是离散的，没有中间状态，所以没法直接过渡。上面两种方案都是绕开这个限制，通过过渡opacity来实现视觉上的平滑切换~

内容的提问来源于stack exchange，提问作者Super Hornet