使用RGBa更改div的背景不透明度

Question

我试图使用jquery ui滑块更改div的背景不透明度.

用户可以更改div的背景颜色,因此我需要知道如何只更改背景的alpha参数而不更改颜色.

到目前为止这是我的代码:

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');

                    var e = $('.element-active');
            var currentColor = $('.element-active').css('background-color');        
                    $(e).css('background-color', 'rgba(255, 255, 255, '+o+')')
                });

我需要一些如何仅改变currentColor变量的alpha部分.我希望有一个人可以帮助我!TIA

Answer 1

试试这个:

var alpha = $(this).slider('value');
var e = $('.element-active');
$(e).css('background-color', 'rgba(255,255,255,' + alpha + ')');?

这里更新了示例

Answer 2

我通过使用字符串操作学习和调整@Tom Smilack 建议的答案，成功地解决了这个问题。

我做了一个小改动，这样他的答案也适用于最初没有设置 alpha 的 div，这是我使用的最终代码：

$('#opacity-slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
            .bind("slidechange", function() {
                //get the value of the slider with this call
                var o = $(this).slider('value');

                var e = $('.element-active');
                var currentColor = $('.element-active').css('background-color');
                var lastComma = currentColor.lastIndexOf(')');
                var newColor = currentColor.slice(0, lastComma - 1) + ", "+ o + ")";
                $(e).css('background-color', newColor);

            });

感谢大家的建议，我希望这对想要相同功能的人有所帮助