Verwendung von CSS-Transparenzfiltern und IE-Transparenzfiltern in verschiedenen Versionen

Das Transparenzattribut opacity von CSS3 muss überall und von jedem verwendet werden. In Bezug auf den Umgang mit Transparenz in Browsern, die CSS3 nicht unterstützen, und um die Konsistenz des Browsereffekts aufrechtzuerhalten, werden in diesem Artikel hauptsächlich die transparente Deckkraft von CSS und die genaueste Verwendung des Transparenzfilterfilters jeder IE-Version vorgestellt Interessierte können mehr erfahren.

Deckkraft der CSS3-TransparenzeigenschaftIch denke, 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 und 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

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

⑫, Shadow Erzeugen Sie einen dreidimensionaleren Schatten

⑬, Wave Lassen Sie das HTML-Element einen horizontalen Or erzeugen Wellenförmige Verformung in vertikaler Richtung

⑭, XRay erzeugt die Umrisse von HTML-Elementen, genau wie das Aufnehmen von Röntgenstrahlen

Detaillierte Erläuterung der Alpha-Filterparameter

①, Deckkraft Der Grad der Deckkraft, 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

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

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

Entsprechender CSS-Code:

.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);  
}

Bei der Verwendung können wir je nach Browser/Version, die angepasst werden soll, aus den oben genannten Optionen auswählen, was wir benötigen Codezeilen. 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 ursprüngliche Beschreibung lautet wie folgt:

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

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

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

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird hilfreich sein Für jedermanns Studie, mehr verwandte Bitte achten Sie auf den Inhalt der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in die Verwendung des in CSS festgelegten Positionierungsattributs position

CSS verwendet Sprites-Technologie Kreise realisieren Die Wirkung von Ecken

Einführung in die Verwendung von Übergangs- und Animationsanimationseigenschaften in CSS3

Das obige ist der detaillierte Inhalt vonVerwendung von CSS-Transparenzfiltern und IE-Transparenzfiltern in verschiedenen Versionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!