使用RGBa更改div的背景不透明度 [英] Changing background opacity of div using RGBa

问题描述

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

I am trying to change the background opacity of a div using a jquery ui slider.

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

The user can change the background color of the div, so I need to know how I can only change the alpha parameter of the background without changing the color.

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

This is my code so far:

$('#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

I need to some how change only the alpha part of the currentColor variable. I hope someone can help me! TIA

推荐答案

我设法通过使用字符串操作来学习并改编@Tom Smilack提出的答案，从而解决了这一问题.

I managed to solve this by learning from and adapting the answer suggested by @Tom Smilack, using string manipulation.

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

I made a small change so that his answer would also work for divs that do not have alpha set originally, here is the final code that I am using:

$('#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);

            });

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

Thanks to everyone for the suggestions and I hope this helps people wanting the same funcitonality

这篇关于使用RGBa更改div的背景不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！