仅更改背景颜色的Alpha通道

嘿家伙我正在尝试仅更改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=$('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; } 

Answer 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; } 

     
 
There is something here