如何用css transition实现背景图平滑过渡

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background: url('image1.jpg') no-repeat center center;
  background-size: cover;
}
<p>.container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('image2.jpg') no-repeat center center;
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
pointer-events: none; /<em> 避免干扰点击事件 </em>/
}</p><p>/<em> 悬停时显示第二张图 </em>/
.container:hover::before {
opacity: 1;
}</p>

<div class="bg-transition" id="bg"></div>
<button onclick="changeBg()">切换背景</button>

.bg-transition {
  width: 300px;
  height: 200px;
  position: relative;
  background: url('image1.jpg') no-repeat center center;
  background-size: cover;
}
<p>.bg-transition::before {
content: '';
position: absolute;
inset: 0;
background: url('image2.jpg') no-repeat center center;
background-size: cover;
opacity: 0;
transition: opacity 0.6s ease;
}</p><p>.bg-transition.fade-in::before {
opacity: 1;
}</p>

function changeBg() {
  const el = document.getElementById('bg');
  el.classList.toggle('fade-in');
}