添加Alpha通道的背景颜色使用jQuery / JavaScript

Add Alpha Channel to Background Color using jQuery / JavaScript

本文关键字：jQuery JavaScript 颜色 Alpha 通道 背景 添加      更新时间：2023-09-26

我有一个jQuery函数，当事件发生时，为background-color添加一个Alpha通道。

这是我的jsFiddle。

CSS 

div { background-color: rgb(100,100,100); }
JavaScript 

function addAlphaChannel() {
    var oldBGColor = $('div').css('backgroundColor'); //rgb(100,100,100)
    var newBGColor = oldBGColor.replace('rgb', 'rgba').replace(')', ',.8)'); //rgba(100,100,100,.8)
    $('div').css({ backgroundColor: newBGColor });
}

这段代码工作得很好，但我想知道是否有一个更好的方式来添加/改变alpha通道?

如果你想用javascript改变rgba css属性，你需要使用replace方法，但是，你可以像这样改进你的代码:

CSS 

 div { background-color: rgba(100, 100, 100, 1.0); }

JS 

function addAlphaChannel() {
    var oldBGColor = $('div').css('background-color'), //rgb(100,100,100),
        newBGColor = oldBGColor.replace(/[^,]+(?='))/, '0.8'); //rgba(100,100,100,.8);
    $('div').css({ backgroundColor: newBGColor });
}

相关文章：