Maison > interface Web > tutoriel CSS > Comment faire en sorte que IE ff Opera prenne en charge la transparence Alpha en même temps_Échange d'expérience

Comment faire en sorte que IE ff Opera prenne en charge la transparence Alpha en même temps_Échange d'expérience

WBOY
Libérer: 2016-05-16 12:04:41
original
1102 Les gens l'ont consulté

Aujourd'hui, nous allons découvrir ensemble la transparence CSS Alpha.
Connaissances connexes sur la transparence CSS Alpha. Tout d'abord, veuillez regarder le code suivant :

Copiez le code Le code est le suivant :

filter:alpha(opacity= 50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5 /* Navigateurs prenant en charge CSS3 (FF 1.5 prend également en charge ) */

Explication simple, IE utilise l'attribut privé filter:alpha(opacity), Moz Family utilise l'attribut privé -moz-opacity, et l'attribut standard est opacity (CSS 3, Moz Family 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 à partir du 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.

La clé est :
Copiez le code Le code est le suivant :

background:transparent url(alpha80.png) left top repeat!important
background:#ccc;
filter:alpha(opacity=50); Alpha PNG transparent, nous n'avons donc 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;*/.
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal