在设置背景颜色半透明经常用CSS的rgba和filter,写法类似这样:
background:rgba(5,7,12,0.9);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e505070c,endcolorstr=#e505070c)
这种方式可以实现背景颜色半透明而不影响其子元素,能够兼容所以浏览器。
那么问题来了,rgba转换成16进制色值比较麻烦,这个demo就是为了解决该问题,只要输入rgba值,就能够直接生成css片段。
/* demo: [5,7,12,0.9] => background:rgba(5,7,12,0.9);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#e505070c,endcolorstr=#e505070c) */
function rgba2Color(rgba){
var color = ‘‘,aColor=‘‘;
for(var i in rgba){
if(rgba.length<=3){
aColor=((1*255).toString(16)).substr(0,2);
var tempColor=rgba[i].toString(16);
color += tempColor.length == 1?‘0‘+tempColor : tempColor;
}else if(i==3){
aColor+=((rgba[i]*255).toString(16)).substr(0,2);
if(aColor=="0") aColor="00";
}else{
var tempColor=rgba[i].toString(16);
color += tempColor.length == 1?‘0‘+tempColor : tempColor;
}
}
return "#"+aColor+color;
}
function rgbaCss(rgba){
var color = rgba2Color(rgba);
return "background:rgba("+rgba.join(‘,‘)+");filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr="+color+",endcolorstr="+color+")";
}
console.log(rgbaCss([5,7,12,0.9]));