Analyse des navigateurs IE, FireFox et Opera prenant en charge la méthode de transparence Alpha

Ce chapitre analysera comment les navigateurs IE, FireFox et Opera prennent en charge la transparence Alpha. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Veuillez d'abord regarder le code suivant :

Le code est le suivant :

filter:alpha(opacity=50);       /* IE */  
-moz-opacity:0.5;              /* Moz + FF */  
opacity: 0.5;           /* 支持CSS3的浏览器（FF 1.5也支持）*/

Explication simple, IE utilise le filtre d'attribut privé : alpha (opacité), la famille Moz utilise l'attribut privé -moz-opacity et l'attribut standard est l'opacité (CSS 3, la famille Moz prend en charge partiellement CSS3). La valeur suivante est la transparence, utilisez un pourcentage ou une décimale (alpha (opacité)). Utilisez une valeur supérieure à 0 et inférieure à 100, qui est en fait un pourcentage).

Vous ne voyez pas Opera dans le code ci-dessus. C'est vrai, Opera ne prend pas encore en charge l'opacité standard et ne dispose pas non plus de ses propres propriétés privées pour prendre en charge la transparence Alpha.

Cependant, nous savons qu'Opera prend en charge les images PNG transparentes Alpha (bien sûr, Moz Family les prend également en charge). Nous pouvons donc utiliser une image d'arrière-plan pour obtenir une transparence Alpha.

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

La clé est :

Le code est le suivant :

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

Étant donné que Moz Family prend en charge le PNG transparent Alpha, nous n'avons pas besoin d'utiliser ses propriétés privées. Bien sûr, vous pouvez utiliser l'opacité standard, mais n'utilisez pas une image alpha transparente et une opacité en même temps, sinon cela devient un mélange des deux. Vous pouvez télécharger l'exemple ci-dessus et consulter les commentaires de /*opacity: .5;*/.