使用Less 语句

//define mixin
.crossbrowser(@color,@alpha){
@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
@argb: argb(@rgba);
background-color: @color;
background-color: @rgba;
filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
-ms-filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
}

//use it
.bg{
.crossbrowser(red, .2);
}

解析出来的代码为：

.bg {
background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
}

貌似不兼容IE9，由于IE9既支持filter，又支持rgba，重复导致背景重叠。最好的兼容Less代码是：

//define mixin
.crossbrowser-ie(@color,@alpha){
@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
@argb: argb(@rgba);
filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=@{argb}, endColorstr=@{argb})";
}
.crossbrowser(@color, @alpha){
filter:none;
@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
 @argb: argb(@rgba);
 background-color: @color;
 background-color: @rgba;
}
.bg{
 .crossbrowser-ie(red,0.3);
}
:root .bg{
 .crossbrowser(red,0.3);
}

解析出来的代码为：

.bg {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#4dff0000, endColorstr=#4dff0000);
}
:root .bg {
filter: none;
background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.3);
}

演示