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

【问题标题】：Changing background opacity of div using RGBa使用 RGBa 更改 div 的背景不透明度
【发布时间】：2012-12-05 14:18:30
【问题描述】：

我正在尝试使用 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

【问题讨论】：

请阅读本文deepubalan.com/blog/2010/03/29/…
我了解不透明度和 rgba 之间的区别。我想使用 rgba，所以我不影响 div 内容的不透明度

标签： jquery css

【解决方案1】：

试试这个：

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

Updated Example Here

【讨论】：

嘿，对不起，我没有正确解释自己。我的代码有效，但它设置了背景颜色或白色，因为这是代码中设置的 (255,255,255) 我想用用户为 div 设置的颜色替换它。希望这更清楚
是的，这是我需要找出当前背景颜色的元素，然后使用滑块使用 RGBa 更改它的不透明度

【解决方案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);

【讨论】：

【解决方案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);

            });

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

【讨论】：

【解决方案4】：

即使这已经解决了，也许我的小功能会帮助某人。作为参数，它需要一个 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);

重要的是 <a>element 已经设置了 rgb 或 rgba 背景色。

<a href="#" style="background-color: rgb(100,10,50);">Sample</a>

【讨论】：

【解决方案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);

【讨论】：

【解决方案6】：

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

 $(myelement).toggleclass();

se the jquery api

【讨论】：