Change only alpha channel in background color

Question

Hi guys, I'm trying to change only the alpha channel in the background color of the div element (using the slider). But I do not know how to do this. Here is my code:

$(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

• Get the current background color,
• Divide it by r, g, b
• Create a new rgba color line
• Change the background color to the new rgba color bar.

Like this:

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

Sample code and demo:

 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

You can use jQuery-Color extension

 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>