Question

我的这个div里面有一张图片。如何使jscolor Picker更改该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">

使用jscolor Picker更改div径向渐变颜色

1 个答案: