CSS3透明度+渐变 [英] CSS3 Transparency + Gradient
问题描述
RGBA非常有趣,因此 -webkit-gradient
, -moz-gradient
和uh。 .. progid:DXImageTransform.Microsoft.gradient
...是的。 :)
RGBA is extremely fun, and so is -webkit-gradient
, -moz-gradient
, and uh... progid:DXImageTransform.Microsoft.gradient
... yeah. :)
有没有办法组合两个,RGBA和渐变,以便使用当前/最新的CSS规格的alpha透明度的渐变。
Is there a way to combine the two, RGBA and gradients, so that there's gradient of alpha transparency using the current/latest CSS specs.
推荐答案
是的。您可以在webkit和moz渐变声明中使用rgba:
Yes. You can use rgba in both webkit and moz gradient declarations:
/* 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 )
在IE中这样做,使用奇怪的扩展十六进制语法。第一对(在示例55中)是指不透明度的水平:
Apparently you can even do this in IE, using an odd "extended hex" syntax. The first pair (in the example 55) refers to the level of opacity:
/* 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 )
这篇关于CSS3透明度+渐变的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!