jquery给div设置半透明背景色，文字不透明

最新推荐文章于 2021-08-18 19:10:06 发布

weixin_34238642

最新推荐文章于 2021-08-18 19:10:06 发布

阅读量751

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/darkness/blog/357045

版权

2019独角兽企业重金招聘Python工程师标准>>>

// 把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;
	  }
	  //处理六位的颜色值
	  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');

转载于:https://my.oschina.net/darkness/blog/357045