给div设置半透明背景色代码,JS代码库,德仔网

代码语言

代码分类

【JS】给div设置半透明背景色

作者:Duncan / 发布于2014/11/18/ 311

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

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　半透明　

同语言下

可能有用的

Duncan贡献的其它代码(49)