increasing/lowering 图像不透明度作为图像列表之间的过渡

Question

我的代码做了什么：

创建背景
每 3 秒使用列表中的下一张背景图片更改背景图片
循环回到列表中索引 0 处的第一个图像并重复。

我想要发生的事情：

每次我们从一张图片切换到下一张图片时都会有一个过渡
每 3 秒一个新图像的不透明度从 0 逐渐增加到 100%
然后在切换到下一张图片之前逐渐将其不透明度降低到 0

<div id="background" class="text-center background">

    <script type = "text/javascript">
        var background = document.getElementById("background");
        var currentPos = 0;
        var images = ["/images/backgroundimg1.jpg", "/images/backgroundimg2.jpg", "/images/backgroundimg3.jpg", "/images/backgroundimg4"], i = 0;

        function changeimage()
        {
            if (++currentPos >= images.length)
                currentPos = 0;

            background.style.backgroundImage = "url(" + images[currentPos] + ")";
        }
        setInterval(changeimage, 3000);
    </script>
</div>

<style>
.background{
    background-repeat: no-repeat;
    background-size: cover;
    height: 1000px;
    }
</style>

Answer 1

对于我自己，我会这样做：

var background = document.getElementById("background");
var currentPos = 0;
var images = ["https://i.stack.imgur.com/MraLT.jpg", "https://i.stack.imgur.com/VxVNC.jpg", "https://i.stack.imgur.com/A9VLC.jpg", "https://i.stack.imgur.com/oYG0R.jpg"],
  i = 0;

function changeimage() {
  if (++currentPos >= images.length) currentPos = 0;

  background.style.backgroundImage = "url(" + images[currentPos] + ")";
}
setInterval(changeimage, 3000);

.background { display: grid; place-items: center; font: bold 48px sans-serif; text-shadow: 0 0 4px #fff, 0 0 2px #fff;

  height: 1000px;
  background-repeat: no-repeat;
  background-size: cover;
  transition: 2s linear;
}

<div id="background" class="text-center background">Only transition</div>

但是，如果需要透明阶段，那么：

你可以使用Base64格式的1×1px透明PNG图片：

var background = document.getElementById("background");
var currentPos = 0;
var images = ["https://i.stack.imgur.com/MraLT.jpg", "https://i.stack.imgur.com/VxVNC.jpg", "https://i.stack.imgur.com/A9VLC.jpg", "https://i.stack.imgur.com/oYG0R.jpg"],
  i = 0;

function changeimage() {
  if (++currentPos >= images.length) currentPos = 0;

  background.style.backgroundImage = `url('${images[currentPos]}')`;
  setTimeout(function() {
    background.style.backgroundImage = `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=)`;
  }, 2500);
}
setInterval(changeimage, 4000);

.background { display: grid; place-items: center; font: bold 48px sans-serif; text-shadow: 0 0 4px #fff, 0 0 2px #fff;

  height: 1000px;
  background-image: linear-gradient(to left, #0000, #0000);
  background-repeat: no-repeat;
  background-size: cover;
  transition: 1.4s linear;
}

<div id="background" class="text-center background">With transparent image</div>

你可以插入一个伪元素作为底层并使用CSS个变量：

var background = document.getElementById("background");
var currentPos = 0;
var images = ["https://i.stack.imgur.com/MraLT.jpg", "https://i.stack.imgur.com/VxVNC.jpg", "https://i.stack.imgur.com/A9VLC.jpg", "https://i.stack.imgur.com/oYG0R.jpg"],
  i = 0;

function changeimage() {
  if (++currentPos >= images.length) currentPos = 0;

  background.style.setProperty('--bg', `url('${images[currentPos]}')`);
  background.style.setProperty('--op', 1);
  setTimeout(function() {
    background.style.setProperty('--op', 0);
  }, 2500);
}
setInterval(changeimage, 4000);

.background { display: grid; place-items: center; font: bold 48px sans-serif; text-shadow: 0 0 4px #fff, 0 0 2px #fff;
  
  --bg: linear-gradient(to left, #0000, #0000);
  --op: 0;
  position: relative;
  height: 1000px;
}

.background::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  z-index: -1;
  background-image: var(--bg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--op);
  transition: opacity 1.4s linear;
}

<div id="background" class="text-center background">Using pseudo element and CSS variables</div>

increasing/lowering 图像不透明度作为图像列表之间的过渡

increasing/lowering image opacity as a transition between lists of images

css

css-transitions

opacity