1

我正在为 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 关键帧动画应用于任何子元素时，仅在 iBooks中，不透明度的行为会发生变化，因此所有子元素都变为半透明。（就好像您在 Photoshop 中调低了组内每一层的不透明度一样。）

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

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

4

0 回答 0