html怎么让文字半透明,用js设置div背景半透明而文字不透明

本文介绍了一种使用JavaScript解决CSS opacity属性导致的子元素(包括文字)一起变透明的问题。通过将16进制颜色转换为RGB格式,并针对IE6-8浏览器的特性,设置内部元素position为relative,以避免文字透明。对于支持rgba的浏览器,则直接使用rgba设置透明背景。这种方法确保了元素背景半透明,而文字保持正常显示。
摘要由CSDN通过智能技术生成

在做网站时我们时常用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 

sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));

}

sColor = sColorNew;

}

//处理六位的颜色值

var sColorChange = [];

for (var i = 1; i 

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) 

// 针对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的元素设置成白色半透明。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值