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/