Peut-être qu'il y a un peu l'opacité de fond?

L'article de Jake "ne peut pas transférer deux éléments Dom actuellement" explore les raisons approfondies pour lesquelles les éléments ne peuvent pas être vraiment croisés, et cet article est très excitant. Bien que l'opacité de deux éléments puisse être animée, ce n'est pas un véritable effet transversal. Il s'avère que la fonction CSS unique de Chrome / WebKit -webkit-cross-fade() peut réaliser cet effet. La documentation MDN mentionne que la fonction est normalisée, mais il existe des différences entre différentes versions d'implémentation, donc c'est un peu déroutant ... mais il existe:

 .el {
  CONTEXTE: -Webkit-Cross-Fade (URL (IMG1.SVG), URL (IMG2.SVG), 50%);
}

Je ne savais même pas qu'il y avait cette fonctionnalité.

La première chose qui me vient à l'esprit est: si l'une des images est une image vierge transparente, une transparence partielle sera-t-elle appliquée à l'autre image? Il peut donc être utilisé comme alternative à background-opacity ( background-opacity n'existe pas, mais il semble que cela devrait exister).

J'ai fait un test pour voir si cela fonctionne:

Les résultats des tests sont valides! Le code central est le suivant:

 .el {
  Image de fond: -webkit-cross-fade (
    url (image.jpg),
    url (données: image / gif; base64, r0lgodlhaqabaiaaaaaaaaaap /// yh5baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa7),
    50%
  ));
}

Il s'agit d'une image GIF transparente codée de 1 pixel codé.

Cette méthode ne fonctionne pas dans Firefox, mais fonctionne dans d'autres navigateurs. De plus, le support du navigateur peut être testé directement dans CSS et différentes méthodes peuvent être utilisées lorsqu'elles ne sont pas prises en charge.

 @Supports (arrière-plan: -webkit-cross-fade (url (), url (), 50%)) {
  / * Appliquer cette méthode uniquement lorsqu'elles sont prises en charge, les alternatives Firefox sont en dehors de ce * /
}

Le code ci-dessus est déjà inclus dans la démo.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!