从图像

Question

在这个例子中的底部使图像背景开始.. http://jsfiddle.net/PKFyV/

你可以看到，我使用jQuery UI打造一个滑块。您可以上下拖动红色条以查看输入更改的值，但是当您这样做时，您会注意到红色图像保持其渐变透视的问题。 jquery设置该div的高度，因此当它非常小时，它将使用图像的顶端，这是渐变的较亮端。我需要的是背景从底部开始，然后根据div的高度进行放大，以便当滑块设置为1或2时，底部条显示红色渐变图像的较暗端。有任何想法吗？

.ui-slider { 
    position: relative; 
    text-align: left; 
} 
#slider-vertical { 
    background:url(http://qupload.com/images/ratingslid.png) no-repeat -30px 0; 
    width:30px; 
    height:161px; 
} 
.ui-slider-range { 
    background:url(http://qupload.com/images/ratingslid.png) no-repeat 0 0; 
    width:30px; 
    height:161px; 
} 
.ui-slider-vertical .ui-slider-range-min { 
    bottom: 0; 
} 
.ui-slider .ui-slider-range { 
    position: absolute; 
    z-index: 1; 
    border: 0; 
} 
.ui-slider-vertical .ui-slider-range { 
    left: 0; 
} 

Answer 1

试试这个：

.ui-slider-range { 
    background:url(http://qupload.com/images/ratingslid.png) no-repeat 0 bottom; 
    width:30px; 
    height:161px; 
} 

Demo