我正在使用 Bootstrap 颜色选择器(请参阅 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)。如果我使用颜色选择器本身,透明度就很好。
我做错了什么吗?
最佳答案
您需要插入格式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)');
});
关于jquery - 无法在 bootstrap colorpicker 中设置 rgba 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40108706/