html透明颜色代码,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);

}

演示