1

私は iBooks epub のアニメーション イラストに取り組んでいます。以下は、XHTML の簡略版です。

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

アニメートしているキャラクターはゴーストなので、コンテナ div に不透明度 (0.7) を適用しました。不気味な。

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

Safari、Chrome、および iBooks では、最初は目的の効果が得られました。つまり、コンテナによってすべてが全体として半透明に見えるということです。(Photoshop でレイヤーのグループの不透明度を下げたかのように。)

ただし、Webkit キーフレーム アニメーションを任意の子要素に適用すると、iBooks のみで、不透明度の動作が変わり、すべての子要素が半透明になります。(Photoshop でグループ内の各レイヤーの不透明度を下げたかのように。)

これは、画像が重なっている場所を確認できることを意味しますが、これは私が望んでいる効果ではありません。

これら 2 つの異なる結果が得られるのはなぜですか?

4

0 に答える 0