CSS过渡与背景图片渐变结合应用_transition background-image技巧

.container {
  position: relative;
  width: 100%;
  height: 400px;
  background-image: url('image1.jpg');
  background-size: cover;
  transition: opacity 0.5s ease-in-out;
}
<p>.container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('image2.jpg');
background-size: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
z-index: -1;
}</p><p>/<em> 鼠标悬停时切换第二张图 </em>/
.container:hover::before {
opacity: 1;
}</p>

.fade-bg {
  width: 100%;
  height: 300px;
  background: 
    url('img1.jpg') no-repeat center,
    url('img2.jpg') no-repeat center;
  background-size: cover;
  position: relative;
}
<p>.fade-bg .overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('img2.jpg');
background-size: cover;
opacity: 0;
transition: opacity 0.6s ease;
}</p><p>.fade-bg:hover .overlay {
opacity: 1;
}</p>

// 切换函数
function changeBackground() {
  const el = document.querySelector('.container');
  el.classList.toggle('next-bg');
}

.container.next-bg::before {
  opacity: 1;
}