Heim  >  Artikel  >  Web-Frontend  >  Beim Parsen unterstützen IE-, Firefox- und Opera-Browser die Alpha-Transparenzmethode

Beim Parsen unterstützen IE-, Firefox- und Opera-Browser die Alpha-Transparenzmethode

WBOY
WBOYOriginal
2016-05-16 12:09:291530Durchsuche

In diesem Kapitel wird analysiert, wie IE-, Firefox- und Opera-Browser Alpha-Transparenz unterstützen. Freunde in Not können sich darauf beziehen.

Bitte schauen Sie sich zuerst den folgenden Code an:

Der Code lautet wie folgt:
filter:alpha(opacity=50);       /* IE */  
-moz-opacity:0.5;              /* Moz + FF */  
opacity: 0.5;           /* 支持CSS3的浏览器(FF 1.5也支持)*/

Einfache Erklärung, IE verwendet die privates 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 auch Moz Family dies). Wir können also ein Hintergrundbild verwenden, um Alpha-Transparenz zu erreichen.

Beispiel: http://realazy.org/lab/alpha/

Der Schlüssel ist:

Der Code lautet wie folgt:

background: transparent url(alpha80.png) left top repeat!important;  
background: #ccc;  
filter:alpha(opacity=50);

Da die Moz-Familie Alpha-transparentes PNG unterstützt, besteht für uns keine Notwendigkeit, ihre privaten Eigenschaften zu 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.

Stellungnahme:
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