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