Heim > Web-Frontend > CSS-Tutorial > So stellen Sie sicher, dass IE ff Opera gleichzeitig Alpha-Transparenz unterstützt_Erfahrungsaustausch

So stellen Sie sicher, dass IE ff Opera gleichzeitig Alpha-Transparenz unterstützt_Erfahrungsaustausch

WBOY
Freigeben: 2016-05-16 12:04:41
Original
1093 Leute haben es durchsucht

Heute lernen wir gemeinsam etwas über CSS Alpha-Transparenz.
Verwandte Kenntnisse zur CSS-Alpha-Transparenz. Bitte schauen Sie sich zunächst den folgenden Code an:

Kopieren Sie den Code Der Code lautet wie folgt:

filter:alpha(opacity= 50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* Browser, die CSS3 unterstützen (FF 1.5 unterstützt auch ) */

Einfache Erklärung: IE verwendet das private Attribut filter:alpha(opacity), Moz Family verwendet das private Attribut -moz-opacity und das Standardattribut ist opacity (CSS 3, Moz Family unterstützt teilweise CSS3). Der folgende Wert ist Transparenz. Verwenden Sie einen Prozentsatz oder eine Dezimalzahl (Alpha (Deckkraft). Verwenden Sie einen Wert größer als 0 und kleiner als 100, was eigentlich ein Prozentsatz ist).

Opera wird im obigen Code nicht angezeigt. Richtig, Opera unterstützt noch keine Standard-Deckkraft und verfügt auch nicht über eigene private Eigenschaften zur Unterstützung der Alpha-Transparenz.
Wir wissen jedoch, dass Opera Alpha-transparente PNG-Bilder unterstützt (natürlich unterstützt dies auch Moz Family). Wir können also ein Hintergrundbild verwenden, um Alpha-Transparenz zu erreichen.

Der Schlüssel ist:
Kopieren Sie den Code Der Code lautet wie folgt:

Hintergrund:transparente URL (alpha80.png) links oben wiederholen!
Hintergrund:#ccc;
filter:alpha(opacity=50);

Da Moz Family unterstützt Alpha-transparentes PNG, daher müssen wir seine privaten Eigenschaften nicht verwenden. Natürlich können Sie die Standard-Deckkraft verwenden, aber verwenden Sie nicht gleichzeitig ein Alpha-transparentes Bild und eine Deckkraft, da sonst eine Mischung aus beiden entsteht. Sie können das obige Beispiel herunterladen und sich die Kommentare von /*opacity:.5;*/ ansehen.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage