用js设置div背景半透明而文字不透明

分类:JavaScript
 标签:javascrit,背景半透明,css
   修改 | 阅读(715)| 评论(0)

在做网站时我们时常用filter:alpha(Opacity=70);类似这要的css样式来设置某个元素呈半透明状态,无可厚非,这样是可以的,但是存在一个很大的问题是,包含在元素中的文字也会随之变成半透明状态,如果透明度设得高一点的话就连文字基本上也看不到了。这里用js来实现元素半透明,而其中的文字正常显示的方法:

// 把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($("#content_list"), "#ffffff", 0.5);

setBakckgoundAndOpacity($("#content_list"), "#ffffff", 0.5);是将id为content_list的元素设置成白色半透明。


您的昵称:*
QQ登录(无需注册直接登录可进行回复)
您的邮箱:(填写邮箱,如有回复可进行邮件通知)
验证码:
点击刷新