たぶん背景がありますか？

ジェイクの記事は、「現在2つのDOM要素をクロスフェードできない」という記事では、要素が真にクロスフェードできない理由を探ります。この記事は非常にエキサイティングです。 2つの要素の不透明度はアニメーション化されますが、これは実際の相互フェード効果ではありません。 Chrome/WebKitのユニークなCSS関数-webkit-cross-fade()この効果を達成できることがわかります。 MDNドキュメントでは、関数は正規化されているが、異なる実装バージョンには違いがあるため、少し混乱しています...しかし、それは存在します：

 .el {
  背景：-webkit-cross-fade（url（img1.svg）、url（img2.svg）、50％）;
}

この機能があることすら知りませんでした。

私の頭に浮かぶ最初のことは、画像の1つが透明な空白の画像である場合、部分的な透明度が他の画像に適用されますか？したがって、それはbackground-opacityに代わるものとして使用できます（ background-opacity存在しませんが、存在するはずです）。

私はそれが機能するかどうかを確認するためにテストをしました：

テスト結果は有効です！コアコードは次のとおりです。

 .el {
  バックグラウンドイメージ：-webkit-cross-fade（
    url（image.jpg）、
    url(data:image/gif; base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7),
    50％
  ）;
}

これは、ベース64エンコードされた1ピクセルの透明なGIF画像です。

この方法はFirefoxでは機能しませんが、他のブラウザでは機能します。さらに、ブラウザのサポートはCSSで直接テストでき、サポートされていない場合はさまざまな方法を使用できます。

 @supports（background：-webkit-cross-fade（url（）、url（）、50％））{
  /*この方法を適用して、サポートされている場合にのみ、Firefoxの代替品はこの外にあります*/
}

上記のコードはすでにデモに含まれています。

以上がたぶん背景がありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。