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

获取当前背景颜色
将其解析为r，g，b
创建新的rgba颜色字符串
将背景颜色更改为新的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=$('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; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 2

您可以使用jQuery-Color扩展程序

@objc private func doubleTapGestureRecognized(recognizer: UITapGestureRecognizer)

＆＃13;

var element = $('#idOfMyDiv');
element.css('background-color', function(){ return $.Color( this, "backgroundColor" ).alpha(.9)})

＆＃13;

$(function () {
    $("#slider").slider({
        range: "min",
        value: 50,
        min: 0,
        max: 100,
        slide: function (event, ui) {
            $('#idOfMyDiv').css('background', function () {
                return $.Color(this, "backgroundColor").alpha(ui.value / 100);
            })
        }
    });
});

＆＃13;

#idOfMyDiv {
  background-color: red;
}

＆＃13;

仅更改背景颜色的Alpha通道

2 个答案: