首页 > 其他 > 详细

利用rgba和filter设置半透明背景色

时间:2015-05-23 14:04:00      阅读:328      评论:0      收藏:0      [点我收藏+]

在设置背景颜色半透明经常用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]));

利用rgba和filter设置半透明背景色

原文:http://www.cnblogs.com/huangcan/p/4524016.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!