CSS背景颜色透明

使用Less 语句

//define mixin
.crossbrowser(@color,@alpha){
@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
@argb: argb(@rgba);
background-color: @color;
background-color: @rgba;
filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
-ms-filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
}

//use it
.bg{
.crossbrowser(red, .2);
}

解析出来的代码为:

.bg {
background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
}

貌似不兼容IE9,由于IE9既支持filter,又支持rgba,重复导致背景重叠。最好的兼容Less代码是:

//define mixin
.crossbrowser-ie(@color,@alpha){
@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
@argb: argb(@rgba);
filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=@{argb}, endColorstr=@{argb})";
}
.crossbrowser(@color, @alpha){
filter:none;
@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
 @argb: argb(@rgba);
 background-color: @color;
 background-color: @rgba;
}
.bg{
 .crossbrowser-ie(red,0.3);
}
:root .bg{
 .crossbrowser(red,0.3);
}

解析出来的代码为:

.bg {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr=#4dff0000, endColorstr=#4dff0000);
}
:root .bg {
filter: none;
background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.3);
}

演示

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:CSS背景颜色透明 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/less-css-bg-transparent.html)

发表评论

请登录后发表评论: