CSS背景图平滑切换方法详解

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: url('image1.jpg') no-repeat center center;
  background-size: cover;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('image2.jpg') no-repeat center center;
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.container:hover .overlay {
opacity: 1;
}

.fade-bg {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image1.jpg');
  background-size: cover;
  background-position: center;
}
.fade-bg::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url('image2.jpg');
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none; / 避免干扰交互 /
}
.fade-bg:hover::before {
opacity: 1;
}

.bg-switch {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('default.jpg');
  background-size: cover;
}
.bg-switch::before {
content: '';
position: absolute;
inset: 0;
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease;
}
.bg-switch.change::before {
opacity: 1;
background-image: url('new-image.jpg');
}

const element = document.querySelector('.bg-switch');
element.classList.add('change'); // 触发切换
// 或 toggle