以下代码,不修改dom结构,实现div的背景半透明,文字不透明效果。
例子,div设置opacity属性会导致内部文字也透明。
// 把16进制颜色转换成rgb格式
var colorToRGB = function(color){
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/g;
var sColor = color.toLowerCase();
if(sColor && reg.test(sColor)){
if(sColor.length === 4){
var sColorNew = "#";
for(var i=1; i<4; i+=1){
sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
}
sColor = sColorNew;
} www.jb200.com
//处理六位的颜色值
var sColorChange = [];
for(var i=1; i<7; i+=2){
sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
}
return sColorChange.join(",");
}else{
return color;
}
}
var setBakckgoundAndOpacity = function(obj,color,opacity){
var rgbaObj = colorToRGB(color);
if(jquery.browser.msie&&parseInt(jQuery.browser.version)<9){
// 针对ie 6,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($(div),'#000000','0.6');