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

我试图使用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

字符串操作可能是最好的方法：

 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); 

Answer 3

我设法通过学习和调整@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); }); 

感谢大家的建议，我希望这有助于人们想要相同的function

Answer 4

即使这已经解决了，也许我的小function会帮助某人。 作为一个参数，它需要一个jQuery元素，如$（’a’）（具有RGB或RGBA背景颜色）和0 – 1的alpha值。

 function RGBA(e, alpha) { //e = jQuery element, alpha = background-opacity b = e.css('backgroundColor'); e.css('backgroundColor', 'rgba' + b.slice(b.indexOf('('), ( (b.match(/,/g).length == 2) ? -1 : b.lastIndexOf(',') - b.length) ) + ', '+alpha+')'); } 

你会像这样使用它：

 RGBA(jQuery('a'), 0.2); 

重要的是元素已经设置了rgb或rgba背景颜色。

 Sample 

Answer 5

对我来说更容易理解的解决方案是用逗号分割rgba颜色并用新的不透明度值更改最后一个元素（当然它只在初始颜色为rgba时有效 ）：

 var newAlpha = $(this).slider('value'); // initial background-color looks like 'rgba(255, 123, 0, 0.5)' var initialBackgroundColor = $('.element-active').css('background-color'); var bgColorSeparated = initialBackgroundColor.split(','); // last element contains opacity and closing bracket // so I have to replace it with new opacity value: bgColorSeparated[3] = newAlpha + ')'; var newColor = bgColorSeparated.join(','); $('.element-active').css('background-color', newColor); 

Answer 6

为什么你不用那种颜色和不透明度来切换一个类

  $(myelement).toggleclass(); 

se jquery api