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