使用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);
}
演示
如果觉得《html透明颜色代码 CSS背景颜色透明》对你有帮助，请点赞、收藏，并留下你的观点哦！
