CSS3透明度+渐变

Question

RGBA是非常有趣的,所以-webkit-gradient,-moz-gradient和呃... progid:DXImageTransform.Microsoft.gradient...是啊.:)

有没有办法将RGBA和渐变两者结合起来,这样就可以使用当前/最新的CSS规范来实现Alpha透明度的渐变.

Answer 1

是.您可以在webkit和moz渐变声明中使用rgba:

/* 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中)指的是不透明度:

/* 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

所有现代浏览器都支持新语法(从Chrome 26,Opera 12.1,IE 10和Firefox 16开始):http://caniuse.com/#feat=css-gradients

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

这会呈现一个渐变,从顶部的纯黑色到底部的完全透明.

有关MDN的文档.

Answer 3

这是一些非常酷的东西!我需要几乎相同,但水平渐变从白色到透明.它工作得很好!这是我的代码:

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

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

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }