Kompatibel mit ie7, 8, 9, 10, FF, Chrome-Maskenanzeige

Diese Situation kommt mir oft vor. Ich möchte feststellen, dass sich auf dem Bild eine Schicht aus Maske und Knopf befindet , habe ich endlich eine kompatible Lösung gefunden, wie in der Frage erwähnt.

Platzieren Sie für die Implementierung der Maskierung die Maskenebene, die Schaltfläche und das Bild im selben Div. Platzieren Sie die Maskenebene und die Schaltfläche gemäß der Funktion „Absolut“ vor dem Bild und legen Sie die Position auf „Absolut“ fest und kein Platz belegt. Legen Sie die Farbe und Transparenz der Maskenebene fest. Da Farbe und Transparenz auf die Transparenz der gesamten Maskenebene und ihrer Unterelemente eingestellt werden, hat das Schaltflächenbild auch Transparenz, wenn es in der Maskenebene platziert wird , wodurch nicht der gewünschte visuelle Effekt erzielt wird. Stellen Sie daher die Maskenebene und das Schaltflächensymbol auf „Flach“ ein.

In IE7 und 8 kann RGBA in der Hintergrundfarbe jedoch nicht den Effekt der Maskenebene anzeigen, daher müssen Farbe und Transparenz im roten Feld anders geschrieben werden:

, der Hintergrund ist auf Schwarz eingestellt, die Deckkraft legt die Transparenz fest, der Filter ist ein IE-Filter (um IE mit der Anzeige von Transparenz kompatibel zu machen)

Dadurch werden konsistente visuelle Effekte für jeden im Titel genannten Browser erzielt: