我希望能够选择 2 种颜色并显示具有渐变背景的 div!
我用“jscolor.com”完成了 2 个颜色选择器,我可以在其中选择颜色,并且我选择的颜色会显示在输入字段中。
Top color<br />
<input type="text" name="color1" class="colors" size="7" value="#444444"/>
<br><br>
Bottom color<br />
<input type="text" name="color2" class="colors" size="7" value="#17181a"/>
然后是我想要显示渐变背景的 div。
<div id="gradient"></div>
如何根据输入字段设置背景颜色? 并提出建议,谢谢。
最佳答案
步骤:
- 为输入提供唯一 ID,以便您可以轻松检索它们。
- 使用 jQuery 的
.css()
设置background-image: Linear-gradient...
并且不要忘记包含所有供应商前缀。 - 当输入更改和加载页面时刷新
线性渐变
示例:
$(function() {
// when inputs change, update the gradient
$(".color").change(refreshGradient);
// draw the gradient when page is loaded
refreshGradient();
});
function refreshGradient() {
var gradientBody = 'linear-gradient(top, ' + $("#color1").val() + ', ' + $("#color2").val() + ')';
// we need to use vendor prefixes
$.each(['', '-o-', '-moz-', '-webkit-', '-ms-'], function() {
$("#gradient").css({ 'background-image': this + gradientBody });
});
}
<强> HERE 是代码。
更新:(参见评论)
要与 jQuery minicolors 集成 .change()
处理程序必须以不同方式注册:
$(".color").miniColors({
change: refreshGradient
});
<强> HERE 是使用 jQuery miniColors 的示例插件。
关于jquery - 使用jquery从colorpicker设置渐变背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8552981/