使用 jscolor 选择器更改 div 径向渐变颜色

Question

我有一个里面有图像的div。 如何让 jscolor 选择器更改该 div 中径向渐变的一个颜色值？

<div class="col-md-10 col-md-offset-1" style="background: radial-gradient(1300px circle at 50% 50%, #090b3c, #000000);">
 <img src="../usrimages/cc_270719195202.png" border="0" class="border"><br>
</div>

<!-- And I'm using jscolor as colorpicker: -->

<script>
function update(jscolor) {
    // 'jscolor' instance can be used as a string
    document.getElementById('rect').style.backgroundColor = '#' + jscolor
}
</script>

<input name="clr1" class="jscolor {onFineChange:'update(this)'}">

<!-- Right now it's changing the color to a rectangle: -->

<p id="rect" style="border:1px solid gray; width:161px; height:100px;">

我试过这样的东西：

document.getElementById('gradientbg').style.backgroundColor = 'radial-gradient(1300px circle at 50% 50%, #FF0000, #000000)';

和这个：

document.getElementById('gradientbg').style.background = 'radial-gradient(1300px circle at 50% 50%, #FF0000, #000000)';

和这个：

document.getElementById('gradientbg').style.backgroundImage = 'radial-gradient(1300px circle at 50% 50%, #FF0000, #000000)';

Answer 1

将.style.backgroundImage更改为您的新渐变应该可以工作：

 function changeColor(ev) { // 'jscolor' instance can be used as a string document.querySelector('.rect').style.backgroundImage = 'radial-gradient(100px circle at 50% 50%, ' + ev.target.value + ', #000000)'; } document.querySelector("input").onchange = changeColor;

 .rect { height: 50px; margin-bottom: 12px; }

 <div class="rect" style="background: radial-gradient(100px circle at 50% 50%, #ff0000, #000000);"></div> <input type="color" value="#ff0000">