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 :
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 :
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;*/.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
