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

Changing background opacity of div using RGBa

提问by Ronny vdb

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

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

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.

用户可以更改div的背景颜色，所以我需要知道如何只更改背景的alpha参数而不更改颜色。

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+')')
                });

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

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

采纳答案by Ronny vdb

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

我设法通过使用字符串操作从@Tom Smilack 建议的答案中学习和调整来解决这个问题。

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:

我做了一个小改动，以便他的答案也适用于最初没有设置 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);

            });

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

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

回答by pala?н

Try this:

尝试这个：

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

Updated Example Here

此处更新示例

回答by Tom Smilack

String manipulation might be the best way to go:

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

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

回答by Vincens von Bibra

Even though this is solved already, maybe my little function will help someone. As an argument it takes a jQuery element like $('a') (that has either an RGB or RGBA background-color) and an alpha value from 0 - 1.

即使这已经解决了，也许我的小功能会对某人有所帮助。作为参数，它采用像 $('a') 这样的 jQuery 元素（具有 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+')');
}

You would use it like this:

你会像这样使用它：

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

The important part is that the <a>element has a rgb or rgba background-color set already.

重要的部分是该<a>元素已经设置了 rgb 或 rgba 背景颜色。

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

回答by feeeper

Just for me more understandable solution is splitting rgba color by comma and changing last element with new opacity value (of course it works only if initial color was rgba):

对我来说，更容易理解的解决方案是用逗号分割 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);

回答by GoAntonio

why you just don't toggle a class with that color and opacitty

为什么你只是不切换具有那种颜色和不透明度的类

 $(myelement).toggleclass();

se the jquery api

设置 jquery api