Die genaueste Verwendung der transparenten CSS-Deckkraft und der IE-Versionen des Transparenzfilters

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 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 zutreffend, 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 unten:

Das private Attribut -moz-opacity wird von Firefox 3.5+ nicht mehr unterstützt, bevor Mozilla 1.7 (Firefox 0.9) für private Attribute verwendet wurde , Firefox 0.9-Firefox3 unterstützt sowohl die Attribute -moz-opacity als auch opacity. Jetzt denke ich an die Zeit zurück, als ich zum ersten Mal den Arbeitsplatz betrat, als plötzlich einige der gut gemachten Seitentransparenzeffekte verschwanden , CSS3 ist überall und ich bedauere, 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 Schreibmethode 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. Allerdings hat diese Schreibmethode 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 und unterstützt Opacity seit Version 4.0.

Zusätzlich zum IE unterstützen die aktuellen Mainstream-Browser Opera 9.0+, Safari 1.2 (WebKit 125) +, Chrome usw. alle das Transparenzattribut „Deckkraft“.

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 Wellenverformung 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>

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

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

Weitere relevante Artikel zur genauesten Verwendung der transparenten CSS-Deckkraft und IE-Versionen von Transparenzfiltern finden Sie auf der chinesischen PHP-Website!