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

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

 

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

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

posted on 2014-06-13 13:19  ziven27  阅读(2049)  评论(0)  编辑  收藏  举报

导航