在做网站时我们时常用filter:alpha(Opacity=70);类似这要的css样式来设置某个元素呈半透明状态，无可厚非，这样是可以的，但是存在一个很大的问题是，包含在元素中的文字也会随之变成半透明状态，如果透明度设得高一点的话就连文字基本上也看不到了。这里用js来实现元素半透明，而其中的文字正常显示的方法：//把16进制颜色转换成rgb格式
varcolorToRGB=function(color){
varreg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/g;
varsColor=color.toLowerCase();
if(sColor&®.test(sColor)){
if(sColor.length===4){
varsColorNew="#";
for(vari=1;i
sColorNew+=sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
}
sColor=sColorNew;
}
//处理六位的颜色值
varsColorChange=[];
for(vari=1;i
sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
}
returnsColorChange.join(",");
}else{
returncolor;
}
}
varsetBakckgoundAndOpacity=function(obj,color,opacity){
varrgbaObj=colorToRGB(color);
if(jQuery.browser.msie&&parseInt(jQuery.browser.version)
//针对ie6，7，8通过设置内部元素position:relative；可以避免被父节点的opacity影响
jQuery(obj).children().each(function(){
if(jQuery(this).css('position')=='static'){
jQuery(this).css('position','relative');
}
});
jQuery(obj).css({
'background':color,
'opacity':opacity
});
}else{
//支持rgba颜色格式的浏览器用rgba设置透明背景色
jQuery(obj).css({
'background':'rgba('+colorToRGB(color)+','+opacity+')'
});
}
}
setBakckgoundAndOpacity($("#content_list"),"#ffffff",0.5);
setBakckgoundAndOpacity($("#content_list"), "#ffffff", 0.5);是将id为content_list的元素设置成白色半透明。
