仅更改背景颜色的Alpha通道

Question

嘿家伙我正在尝试仅更改div元素的背景颜色中的alpha通道(使用滑块).但我不知道该怎么做.这是我的代码:

$(function() {
    $( "#slider" ).slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function( event, ui ) {
            // While sliding, update the value in the alpha div element
            $('#idOfMyDiv').css('background', rgb(,,,ui.value) ); //I don't know what to do here
        }
    });
});

Answer 1

1. 获取当前背景颜色，
2. 将其解析为 r,g,b
3. 创建一个新的 rgba 颜色字符串
4. 将背景颜色更改为新的 rgba 颜色字符串。

像这样：

var newAlpha=0.50;

var bg=$('#idOfMyDiv').css('backgroundColor');

var a=bg.slice(4).split(',');

var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+','+newAlpha+')';

$('#idOfMyDiv').css('backgroundColor',newBg);

示例代码和演示：

var newAlpha=0.50;

var bg=$('#idOfMyDiv').css('backgroundColor');

var a=bg.slice(4).split(',');

var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+','+newAlpha+')';

$('#idOfMyDiv').css('backgroundColor',newBg);

var newAlpha=0.50;
var bg=$('body').css('backgroundColor');
var a=bg.slice(4).split(',');
var newBg='rgba('+a[0]+','+parseInt(a[1])+','+parseInt(a[2])+','+newAlpha+')';
$('body').css('backgroundColor',newBg);

body{ background-color: orange; }