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/

CSS不透明度转换在动画期间不考虑叠加不透明度

1 个答案: