noUiSlider透明度

Question

我正在使用noUiSlider范围滑块。这里的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 
    } 
}); 

我想使滑块透明的，而只有所选择的范围应该有颜色，但到目前为止，我做到这一点，因为当我做出正确的部分透明我看到潜在的颜色范围：

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

你有什么想法？

更新：

我想滑块背景是图像：

Answer 1

至于我的评论说，这是不可能的，你仍然可以调整它。您必须确保滑块的背景与您的背景相同，例如您的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