jQuery设置CSS背景不透明度

前端之家收集整理的这篇文章主要介绍了jQuery设置CSS背景不透明度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个< div>我想改变其背景颜色(而不是其内容)的透明度.远程API发送给我这种颜色:
#abcdef

我告诉jQuery(1.9)通过.css应用这种颜色:

$('div').css('background-color','#abcdef');

结果div具有不是#abcdef的背景颜色样式,而是具有相同颜色的RGB表示.

background-color: rgb(171,205,239);

(只是观察;不是问题的一部分)

项目要求已经改变,我现在还需要将背景的透明度改为设定的百分比(50%).因此,我想要的背景颜色属性

background-color: rgba(171,239,0.5);

但是,我找不到使用jQuery(十六进制颜色代码)设置此背景颜色属性方法,并仍然应用alpha值.不透明度会影响div的内容以及背景,因此它不是一个选项.

$('div').css('background-color','#abcdef')
        .css('opacity',0.5);  // undesirable opacity changes to div's content

给定字符串#abcdef,只有通过计算(例如hex2dec)才可以将背景不透明度应用于div,如果我只给出一个十六进制颜色字符串?

解决方法

尝试使用parseInt(十六进制,16)将十六进制字符串转换为十进制int

所以在这种情况下,它将是:

var color = '#abcdef';
var rgbaCol = 'rgba(' + parseInt(color.slice(-6,-4),16)
    + ',' + parseInt(color.slice(-4,-2),' + parseInt(color.slice(-2),16)
    +',0.5)';
$('div').css('background-color',rgbaCol)

你应该创建一个函数来在你的应用程序中使用.

猜你在找的jQuery相关文章