今天有看到司徒正美《背景半透明rgba最佳实践》的文章和里面推荐的一个在线工具CSS背景颜色属性值转换 。
于是联系到自己的less库，新技能Get。
内容如下：
/*在你的less库中加入以下代码*/
//rgba创建兼容IE的rgba
#rgba(@r,@g,@b,@a){
@c: rgba(@r,@g,@b,@a);
@c2 :argb(@c);
/* for IE9 IE8 IE7 not sure about IE6*/
filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{c2}', endColorstr='@{c2}')";
background-color:@c;
:root &{
/*
* IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除
* \9 代表 IE9 以下浏览器支持
* :root 只有 IE9+ 以及其他现代浏览器支持
* IE10 以上不再支持 filter
*/
filter:none;
}
}
使用方法：
/*LESS 里面这样写*/
.demo{ #rgba(255,0,0,0.3); } /*解析后的css为*/
.demo {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4dff0000', endColorstr='#4dff0000');
background-color: rgba(255, 0, 0, 0.3);
}
:root .demo { filter: none;}
本文为原创文章，会经常更新知识点以及修正一些错误，转载请保留原出处。