IE-kompatible Lösung für Opazitäts-Transparenzfilter

Dieses Mal bringe ich Ihnen eine IE-kompatible Lösung für den Opazitäts-Transparenzfilter. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Opazitäts-Transparenzfilters? Hier ist ein praktischer Fall.

Deckkraft des CSS3-TransparenzattributsIch glaube, jeder hat es überall verwendet. Was die transparente Verarbeitung von Browsern betrifft, die CSS3 nicht unterstützen, und die Aufrechterhaltung konsistenter Browsereffekte, denke ich, dass jeder dies schreiben kann. Wenn es jedoch um die spezifische grammatikalische Bedeutung von Filter und die unterschiedlichen Schreibmethoden jeder Version geht, ist dies bei vielen Menschen nicht der Fall Ich habe viele Experten in der Gruppe gefragt, aber keiner von ihnen ist sehr genau, und die Meinungen im Internet sind noch vielfältiger. Heute überprüfe ich hauptsächlich dieses Attribut und führe tatsächliche Tests durch, um die richtige Schreibmethode sowie die Unterstützungs- und Schreibunterschiede verschiedener IE-Versionen zu veranschaulichen.

Zunächst wird das Attribut „Opacity“ verwendet, um die Transparenz eines Elements festzulegen. Der Wertebereich liegt zwischen 0 und 1 und kann nicht negativ sein. Ein Deckkraftwert von 1 ist vollständig undurchsichtig und ein Wert von 0 ist vollständig transparent und optisch unsichtbar. Bezüglich der Browserkompatibilität mit dem Opazitätsattribut lesen Sie bitte weiter:

Das private Attribut -moz-opacity wird ab Firefox 3.5 und höher nicht mehr unterstützt. Dies wurde vor Mozilla 1.7 (Firefox 0.9) verwendet. Für private Attribute gilt Firefox 0.9 -Firefox3 unterstützt sowohl die Attribute „-moz-opacity“ als auch „opacity“. Als ich zum ersten Mal an den Arbeitsplatz kam, verschwanden einige der gut gemachten Seitentransparenzeffekte plötzlich überall, und ich beklage, wie die Zeit vergeht.

IE9+ hat erst begonnen, CSS3-Deckkraft zu unterstützen, und für IE6-IE8 sind wir es gewohnt, das Filterattribut zu verwenden, um es zu implementieren. IE4-IE9 unterstützen alle die Filterschreibmethode progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).

IE8 hat den speziellen -ms-filter eingeführt. IE glaubt, dass diese Schreibmethode eine Korrektur der alten Schreibweise ist Methode, die eher der Spezifikation entspricht. Der Attributwert dieser Schreibmethode enthält nur ein Paar Anführungszeichen und der Effekt ist der gleiche wie zuvor. Diese Schreibmethode hat jedoch eine kurze Lebensdauer. Ab IE10 werden filter und -ms-filter nicht mehr unterstützt.

Safari-Versionen vor 1.2 basierten auf dem Browser-Kernel von khtml. Nach der Veröffentlichung von Version 1.2 wurde die Schreibmethode -khtml-opacity nicht mehr unterstützt und -khtml-opacity wurde Geschichte.

Konqueror hat -khtml-opacity nie unterstützt, unterstützt jedoch seit Version 4.0 Opacity.

Neben IE unterstützen auch die aktuellen Mainstream-Browser Opera 9.0+, Safari 1.2 (WebKit 125)+, Chrome usw. das Transparenzattribut „Opacity“.

Ab Version 4.0 bietet IE einige integrierte Multimedia-Filtereffekte. Die spezifische Verwendungsmethode ist:

Syntax:

Filter: Filter

Parameter:

Filter: Der zu verwendende Filtereffekt. Trennen Sie mehrere Filter durch Leerzeichen.

Anweisungen:

1. Legen Sie den auf das Objekt angewendeten Filtereffekt fest oder rufen Sie ihn ab.

2. Um dieses Attribut zu verwenden, muss das Objekt eines der drei Attribute haben: Höhe, Breite, Position.

3. Der Filtermechanismus ist erweiterbar. Es können Filter von Drittanbietern entwickelt und verwendet werden.

4. Dieses Attribut ist auf der MAC-Plattform nicht verfügbar.

5. Die entsprechende Skriptfunktion ist Filter.

IE4.0 oder höher unterstützt die folgenden 14 Filter:

①, Alpha ermöglicht HTML-Elementen die Anzeige eines transparenten progressiven Effekts

② , Blur sorgt dafür, dass HTML-Elemente einen windunscharfen Effekt haben

③, Chroma macht eine bestimmte Farbe im Bild transparent

④, DropShadow sorgt dafür, dass HTML-Elemente einen fallenden Schatten haben

⑤, FlipH bewirkt, dass das HTML-Element horizontal gespiegelt wird

⑥, FlipV bewirkt, dass das HTML-Element vertikal gespiegelt wird

⑦, Glow erzeugt einen Halo- und Unschärfeeffekt um das Element

⑧, Gray Turn ein Farbbild in Schwarzweiß umwandeln

⑨, Invertieren Erzeugt den Effekt eines Fotonegativs des Bildes

⑩, Licht Platzieren Sie ein Licht und einen Schatten auf dem HTML-Element

⑪, Maske Verwenden Sie ein anderes HTML-Element, um eine Maske des Bildes auf einem anderen Element

zu generieren

⑫、Shadow Erzeugt einen dreidimensionaleren Schatten

⑬、Wave Erzeugt bei HTML-Elementen eine horizontale oder vertikale Wellenverformung

⑭、XRay Erzeugt den Umriss von HTML-Elementen, genau wie es ist wie eine Röntgenaufnahme

Detaillierte Erläuterung der Alpha-Filterparameter

①, Opazität Der Grad der Opazität, Prozentsatz. Von 0 bis 100 bedeutet 0 völlig transparent und 100 völlig undurchsichtig.

②. Dies ist ein selektiver Parameter, der zusammen mit Opacity und FinishOpacity verwendet wird, um einen transparenten und progressiven Effekt zu erzeugen, der kühler ist. Von 0 bis 100 bedeutet 0 völlig transparent und 100 völlig undurchsichtig.

③, Stil Wenn Opacity und finishOpacity gleichzeitig festgelegt werden, um einen transparenten Farbverlauf zu erzeugen, wird hauptsächlich Rot verwendet, um die progressive Anzeigeform anzugeben. 0: Kein Gradient; 1: Linearer Gradient; 3: Rechteckige Strahlung.

④ Start >⑦, FinishY Der Y-Koordinatenwert des allmählichen Endes

Das Folgende ist ein Beispiel zum Testen der Kompatibilität von Filter und Deckkraft:

Html-Code

Hinweis: Zum Testen nicht erforderlich. Vergessen Sie, DOCTYPE zu schreiben, da es sonst vom tatsächlichen Effekt abweicht.

Entsprechender CSS-Code:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=utf-8 />  
<title>JS Bin</title>  
</head>  
<body>  
  <p class="transparent_class">测试透明度</p>  
</body>  
</html>

Im Einsatz können wir je nach Browser/Version, die angepasst werden soll, die Codezeile auswählen, die wir oben benötigen. Wenn Sie volle Unterstützung für alle Browser wünschen, sind mindestens die ersten 5 Sätze zu Deckkraft oder Filter erforderlich. Es muss angegeben werden, dass Sie, wenn Sie filter und -ms-filter gleichzeitig verwenden möchten, bitte -ms-filter vor filter schreiben. Die Originalbeschreibung lautet wie folgt:

Wenn Sie möchten, dass die Deckkraft auch im IE7-Emulationsmodus von IE8 funktioniert, sollte die Reihenfolge wie folgt lauten:

.transparent_class {  
    /* Required for IE 5, 6, 7 */  
    /* ...or something to trigger hasLayout, like zoom: 1; */  
    width:300px;  
    height:300px;  
    line-height:300px;  
    text-align:center;  
    background:#000;  
    color:#fff;  
    /* older safari/Chrome browsers */  
    -webkit-opacity: 0.5;  
    /* Netscape and Older than Firefox 0.9 */  
    -moz-opacity: 0.5;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/  
    -khtml-opacity: 0.5;  
    /* IE9 + etc...modern browsers */  
    opacity: .5;  
    /* IE 4-9 */  
    filter:alpha(opacity=50);  
    /*This works in IE 8 & 9 too*/  
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
    /*IE4-IE9*/  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
}

Wenn Sie diese Reihenfolge nicht verwenden IE8, der IE7 emuliert, wendet die Deckkraft nicht an, obwohl dies bei IE8 und IE7 nativ der Fall ist.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first  
filter: alpha(opacity=50); // second

Transparent verwenden, um Dreiecke zu erstellen

CSS3-Browserkompatibilitätsprobleme

HTML5+CSS3-Ladefortschrittsbalken und Download-Fortschrittsbalkenimplementierung

Das obige ist der detaillierte Inhalt vonIE-kompatible Lösung für Opazitäts-Transparenzfilter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!