nouislider的自定义图像句柄

我在我的网站上使用noUislider效果很好。 今天我有了将手柄从无聊的圆角矩形更改为图像的想法。 我认为这将是一个简单的CSS’背景图像’添加，但它certificate是不可能让我的图像显示。 我有人在这里得到一个图像显示？

noUislider的作者在posthttps://github.com/leongersen/noUiSlider/issues/172中建议了以下css：

.noUi-handle { background-image: url('/path/to/your/image.png'); } 

我已将此添加到jquery.nouislider.css文件中，但这不起作用。 如果作者编码不起作用则没有希望。 我目前有：

 .noUi-handle { border: 1px solid #cccccc; border-radius: 5px; background: #fff; /* For Safari 5.1 to 6.0 */ cursor: col-resize; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } 

当我将其更改为（用background-image替换背景）时：

 .noUi-handle { border: 1px solid #cccccc; border-radius: 5px; background-image: url(images/handle.png); cursor: col-resize; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } 

手柄是透明的，没有图像。 有人能帮我一下吗？ 这么傻的问题！ 非常感谢。

Answer 1

 .noUi-handle { border: 1px solid #cccccc; border-radius: 5px; background-color: #fff; /* For Safari 5.1 to 6.0 */ background-image: url(images/handle.png); background-size: 100% 100%; background-repeat: no-repeat; cursor: col-resize; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } 

如果不工作： use => !important

 background-image: url(images/handle.png)!important; background-size: 100% 100%!important; background-repeat: no-repeat!important;