如何使用CSS实现背景图片平滑切换_background-image与过渡结合

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: url('image1.jpg') no-repeat center center;
  background-size: cover;
}
<p>.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;
}</p><p>.container:hover .overlay {
opacity: 1;
}</p>

.fade-bg {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url('image1.jpg');
  background-size: cover;
  background-position: center;
}
<p>.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; /<em> 避免干扰交互 </em>/
}</p><p>.fade-bg:hover::before {
opacity: 1;
}</p>

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

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