rework.less/fixer/transparent.less

一种面向浏览器用户代理样式（user agent stylesheet）兼容的解决方案

/*
* 模块描述：转换背景透明度值
* 模块兼容：Chrome（latest-1）、Firefox（latest-1）、Explorer（6+）
* 模块作者：@yincw
* 最后更新：2014-06-02
*/

.transparent(@r, @g, @b, @a) {
    @argb: argb(rgba(@r, @g, @b, @a));

    // 回退到不支持 rgba 格式的浏览器（IE6、IE7、IE8）
    background: e('rgb(@{r}, @{g}, @{b})') transparent;

    // Chrome、Firefox、IE9及以上
    background: rgba(@r, @g, @b, @a);

    // IE6、IE7
    filter: e('progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})');

    // IE8（IE9也支持）
    -ms-filter: e('"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})"');
}

// ==============================
// 使用示例
// ==============================
// .example { .transparent(0, 0, 0, .5); }

// ==============================
// 参考文献
// ==============================
// http://caniuse.com/#feat=css3-colors
// http://colmjude.com/blog/ie-transparent-backgrounds
// http://davidshariff.com/blog/css-transparent-background/