仅更改背景颜色中的 Alpha 通道答案

【问题标题】：Change only Alpha channel in background-color仅更改背景颜色中的 Alpha 通道
【发布时间】：2015-08-27 23:41:33
【问题描述】：

我正在尝试仅更改 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
        }
    });
});

【问题讨论】：

看看这个stackoverflow.com/questions/19663427/…

标签： jquery css

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

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

如果您当前的背景颜色是 rgba 而不是 rgb，这将不起作用。在这种情况下，您应该 slice(5) 而不是 slice(4)

【解决方案2】：

您可以使用jQuery-Color 扩展名

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

$(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);
            })
        }
    });
});

#idOfMyDiv {
  background-color: red;
}

<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/color/jquery.color.plus-names-2.1.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<div id="slider"></div>

<div id="idOfMyDiv">There is something here</div>

【讨论】：