Jquery knob jQuery旋钮使用图像代替/覆盖值

您知道是否可以在圆形进度条中替换、覆盖或插入图像吗

---

我知道该值可以省略，但如果可以替换，则没有示例或提示。

可以在jquery旋钮内部插入图像，使用图像和jquery旋钮创建为旋钮画布容器的

。在这个div中添加一个更高的
z-index
，旋钮将显示在图像的顶部-因此您不必关心正确的图像大小和形状。
设置示例：

<input class="knob" type='text' value='100' data-angleOffset="0" 
 data-angleArc="360" data-fgColor="blue" data-displayInput=false />
<img class="inside" src="http://placehold.it/120x120"/>

/* CSS*/
.inside
{
 position:absolute;
 top:50px;
 left:50px;
 z-index:1;
}
.outside
{   
 position:absolute;
 z-index: 2;
}

/* jQuery*/
$(function () {
  $('.knob').knob({});
  $(".knob").parent("div").addClass("outside")    
});


/*CSS*/
在…内
{
位置：绝对位置；
顶部：50px；
左：50px；
z指数：1；
}
.外面
{   
位置：绝对位置；
z指数：2；
}
/*jQuery*/
$（函数（）{
$（'.knob'）。knob（{}）；
$（“.knob”）.parent（“div”）.addClass（“外部”）
});

演示：
旋钮本身没有这样的选项，但您可以随时使用jQuery侵入，显然，旋钮将创建一个外部DIV来容纳画布，因此您可以调用类似以下代码的内容，将IMG标记插入该DIV，并使用位置（相对/绝对）来管理其外观。
您可以围绕旋钮的宽度和高度进行游戏，使用.knob image top/left使其与圆圈内的图像完美匹配

<style>
    .knob-image {
        position: absolute;
        top: -71px;
        left: 15px;
        width: 70px !important;
        height: 70px !important;
        border-radius: 50%;
    }
</style>
<div class="knob" data-width="100" data-height="100" data-thickness=".3" data-displayInput=false></div>    
<script>
    $(".knob").knob();         
    $(".knob").parent('div').css('position', 'relative').prepend('<img src="abc.jpg" class="knob-image">');        
    $(".knob").val(27).trigger("change"); //set the default value
</script>


.旋钮图像{
位置：绝对位置；
顶部：-71px；
左：15px；
宽度：70px！重要；
高度：70px！重要；
边界半径：50%；
}
$（“.knob”）.knob（）；
$（“.knob”）.parent（'div'）.css（'position'，'relative'）.prepend（''）；
$（“.knob”）.val（27）。触发器（“更改”）//设置默认值