Question

我正在制作iBooks epub的动画插图。这是XHTML的简化版本。

<div id="parent">
    <img src="image-1.png" />
    <img src="image-2.png" />
    <img src="image-3.png" />
</div>

我动画的角色是幽灵，因此我将不透明度（0.7）应用于容器div。幽灵般的。

#parent {
    position: absolute;
    top: 178px;
    left: 335px;
    width: 589px;
    height: 1295px;
    z-index: 3;
    opacity: 0.7;
}

在Safari，Chrome和iBooks中，我最初得到了所需的效果，即容器会使所有内容整体呈现半透明状态。（好像你已经调低了photoshop中一组图层的不透明度。）

但是，当我将webkit关键帧动画应用于任何子元素仅限中的时，不透明度的行为会发生变化，以便所有子元素变为半透明。（好像你已经调低了photoshop中一组中每一层的不透明度。）

这意味着您可以看到图像重叠的位置，这不是我希望的效果。

为什么我得到这两个不同的结果？