Les dégradés CSS3 peuvent-ils utiliser la transparence Alpha ?

Combiner la transparence et les dégradés CSS3

CSS3 présente une combinaison intrigante de capacités rgba et de dégradé. Est-il possible d'exploiter ces fonctionnalités ensemble, permettant des dégradés qui ajustent de manière transparente la transparence alpha en fonction des spécifications CSS ?

Réponse :

En effet, il est possible d'incorporer rgba dans les déclarations de gradient webkit et moz. Voici un exemple :

Dégradé Webkit :

background-image: -webkit-gradient(
  linear, left top, left bottom,
  from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)),
  color-stop(.5,#333333)
);

Dégradé Mozilla (Firefox 3.6) :

background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%,
  rgba(255, 255, 255, 0) 95%
);

Même Internet Explorer offre cette fonctionnalité en utilisant une syntaxe unique « hexadécimale étendue ». La première paire du code représente le niveau d'opacité :

Dégradé Internet Explorer :

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

/* IE8 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!