Can CSS3 Gradients Use Alpha Transparency?

Combining CSS3 Transparency and Gradients

CSS3 presents an intriguing combination of rgba and gradient capabilities. Is it possible to harness these features together, allowing for gradients that seamlessly adjust alpha transparency based on the CSS specifications?

Answer:

Indeed, it is possible to incorporate rgba into both webkit and moz gradient declarations. Here's an example:

Webkit Gradient:

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)
);

Mozilla Gradient (Firefox 3.6 ):

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

Even Internet Explorer offers this capability using a unique "extended hex" syntax. The first pair in the code represents the opacity level:

Internet Explorer Gradient:

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

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

The above is the detailed content of Can CSS3 Gradients Use Alpha Transparency?. For more information, please follow other related articles on the PHP Chinese website!