javascript - CSS 不透明度转换不考虑动画期间的叠加不透明度

Question

我有一个 div，其中包含一个用作叠加层的 div，以及另一个包含一些图像的 div。叠加层具有不透明度，因此可以看到图像，但仍可以阅读文本。

但是，当我为图像的不透明度设置动画时，它会忽略动画期间的叠加层，直到完成。

他是代码:

HTML

<div class="container">
  <div class="overlay"></div>
  <div class="image-container">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
  </div>
</div>

CSS

.container {
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    background-color: yellow;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    opacity: 0.78;
    background-color: rgb(245, 245, 245);
}

JavaScript

var image = document.getElementsByTagName("IMG")[0];
image.style.opacity = 0;

setTimeout(function() {
    image.style.transition = "opacity 3s linear";
    image.style.opacity = 1;
}, 1000);

我还有一个 jsfiddle 示例:

https://jsfiddle.net/ygqov8t4/

我已经在 Mac 上的 Chrome、Firefox 和 Safari 中对此进行了测试。所有浏览器都有相同的行为，所以这可能是设计使然？

我曾尝试使用 JavaScript 执行此操作，但我无法让动画正常运行，而且我担心性能问题，因为这将在很多(100 多张)图像上运行。

image.onload = function() {
    var self = this;
    for (var i = 0; i < 1000; i++) {
        setTimeout(function() {
            self.style.opacity = i/1000;
        }, i);
    }
}

Answer 1

尝试通过将其 z-index 设置为 1 来强制叠加层位于图像上方

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    opacity: 0.78;
    background-color: rgb(245, 245, 245);
    z-index: 1;
}

https://jsfiddle.net/05pwwtm7/1/