Невозможно установить значение rgba в bootstrap colorpicker

Question

Я использую bootstrap colorpicker (см. https://itsjavi.com/bootstrap-colorpicker), и он отлично работает, за исключением одного: использование jQuery значения для чего-то, что включает прозрачность.

Я сделал jsfiddle, воспроизводящий проблему http://jsfiddle.net/gwonha3L:

Html:

<div class="main"> 
    <div class="color input-group colorpicker-component"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"><i></i></span> 
    </div> 

    <input id="updatecolorbtn" type="button" value="Set color to rgba(255,0,0,0.5)" class="form-control" /> 

    <div id="colordiv" style="width: 100px; height: 100px; background-color: lightblue;"></div> 
</div> 

Javascript:

$(function() { 
    $('.color').colorpicker().on('changeColor', function(ev) { 
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue')); 
    }); 
}); 

$("#updatecolorbtn").click(function() { 
    $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)'); 
}); 

Вы могли бы ожидать, что при нажатии кнопки изменит цвет на красный с 50% прозрачности, но вместо этого он просто красный (# ff0000). Если я сам использую colorpicker, прозрачность просто прекрасна.

Я что-то не так?

Answer 1

Вам необходимо вставить формате RGBA

$(function() { 
    $('.color').colorpicker({format: 'rgba'}).on('changeColor', function(ev) { 
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue')); 
    }); 
}); 

$("#updatecolorbtn").click(function() { 
    $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)'); 
}); 

http://jsfiddle.net/gwonha3L/1/