javascript - noUiSlider 透明度

Question

我正在使用 noUiSlider 范围 slider 。这是 jsfiddle:

https://jsfiddle.net/oun5p1xz/

behaviourSlider = document.getElementById('slider');

noUiSlider.create(behaviourSlider, {
    start: [ 30, 40 ],
    step: 10,
    behaviour: 'drag',
    connect: true,
    range: {
        'min':  20,
        'max':  80
    }
});

我想让 slider 透明，只有选定的范围应该有颜色，但到目前为止我实现了这一点，因为当我使右侧部分透明时，我看到了底层范围颜色:

https://jsfiddle.net/oun5p1xz/1/

你有什么想法吗？

更新:

我希望 slider 背景是一个图像:

Answer 1

就我的评论而言，您仍然不可能对其进行调整。您必须确保 slider 的背景与例如您的 body 或 div 或任何其他 DOM 对象它们的背景相同，然后您将获得所需的结果。这是我使用的 CSS:

body{
   background-color:#fff;
   margin:20px;
}
#slider {
      background: rgba(255,255,255,0);
}
.noUi-target{
   border:0;
   box-shadow:none
}
#slider .noUi-background {
  background: #fff;
  box-shadow:none;
}

现场直播:JSFIDDLE

---

根据您更新的问题，我修改了 CSS，现在我使用以下 CSS:

body{   
   margin:20px;
}
#slider {
      background: rgba(255,255,255,0);
}
.noUi-connect{
   background: transparent;
   box-shadow:none;
}
.noUi-base{
   background-color: transparent;
   background-image:url(http://wallpapercave.com/wp/tmx6W6N.png);
}
#slider .noUi-background {
  background: transparent;
  box-shadow:none;
}

现场演示 JSFIDDLE