Vielleicht gibt es irgendwie Hintergrundoptazität?

Jakes Artikel "kann derzeit keine zwei DOM-Elemente überschreiten" untersucht ausführliche Gründe, warum Elemente nicht wirklich geschlagen werden können, und dieser Artikel ist sehr aufregend. Während die Opazität von zwei Elementen animiert werden kann, ist dies kein realer interpretierender Effekt. Es stellt sich heraus, dass Chrome/Webkits einzigartige CSS-Funktion -webkit-cross-fade() diesen Effekt erreichen kann. In der MDN -Dokumentation wird erwähnt, dass die Funktion normalisiert ist, es gibt jedoch Unterschiede zwischen verschiedenen Implementierungsversionen. Daher ist sie ein wenig verwirrend ... aber es existiert:

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

Ich wusste nicht einmal, dass es diese Funktion gab.

Das erste, was mir in den Sinn kommt, ist: Wenn eines der Bilder ein transparentes leeres Bild ist, wird dann teilweise Transparenz auf das andere Bild angewendet? Es kann also als Alternative zur background-opacity verwendet werden ( background-opacity gibt es nicht, aber es fühlt sich an, als ob es existieren sollte).

Ich habe einen Test durchgeführt, um zu sehen, ob es funktioniert:

Die Testergebnisse sind gültig! Der Kerncode lautet wie folgt:

 .el {
  Hintergrundbild: -Webkit-Cross-Fade (
    URL (Image.jpg),
    url(data:image/gif; base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7),
    50%
  );
}

Dies ist ein base64 codiertes 1-Pixel-transparentes GIF-Bild.

Diese Methode funktioniert nicht in Firefox, sondern funktioniert in anderen Browsern. Darüber hinaus kann die Browserunterstützung direkt in CSS getestet und verschiedene Methoden verwendet werden, wenn sie nicht unterstützt werden.

 @Supports (Hintergrund: -Webkit-Cross-Fade (url (), url (), 50%)) {
  /* Wenden Sie diese Methode nur an, wenn die Firefox -Alternativen außerhalb dieses*/liegen*/
}

Der obige Code ist bereits in der Demo enthalten.

Das obige ist der detaillierte Inhalt vonVielleicht gibt es irgendwie Hintergrundoptazität?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!