CSS3 Transparence + Gradient

Question

RVBA est extrêmement amusant et est donc , et euh... `` ... Oui. :)

Est-il possible de combiner les deux, RGBA et dégradés, afin qu’il n’y a dégradé de transparence alpha en utilisant la fiche CSS courant/plus tard.

Answer 1

Oui. Vous pouvez utiliser rgba dans les deux webkit et moz gradient de déclarations:

/* webkit example */
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)
);

(src)

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

(src)

Apparemment, vous pouvez même le faire dans IE, à l'aide d'un étrange "extended hex de syntaxe". La première paire (dans l'exemple 55) se réfère au niveau d'opacité:

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

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

(src)

Answer 2

Nouvelle syntaxe nécessaire par les navigateurs respectueux des standards (12,1 Opera, IE 10, Fx 16 ans) :

Cela créerait transparent noir solide

Answer 3

Il s’agit des trucs vraiment cool ! J’ai besoin à peu près la même chose, mais avec un gradient horizontal de blanche transparente. Et il fonctionne très bien ! Ici ist mon code :

Answer 4

J’utilise http://enjoycss.com pour générer n’importe quel genre de simple et complexe dégradés thty ont beaucoup de modèles de dégradé dans la Galerie ainsi

Answer 5

Voici mon code :