首页 > 代码库 > css27】背景半透明rgba LESS实践
css27】背景半透明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 以上不再支持 filter15 */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;}
本文为原创文章，会经常更新知识点以及修正一些错误，转载请保留原出处。
本文地址：http://www.cnblogs.com/css27/p/3785642.html
如果您觉得这文章对您有帮助，可以打赏点钱给我，鼓励我继续写一些高质量的博文。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。