【27前端】背景半透明rgba LESS实践

今天有看到司徒正美《背景半透明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;}

本文为原创文章，会经常更新知识点以及修正一些错误，转载请保留原出处。

本文地址：http://www.cnblogs.com/css27/p/3785642.html

 

如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写一些高质量的博文。