2

在这个例子中.. 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;
}
4

1 回答 1

4

试试这个：

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

演示

于 2012-12-30T18:04:02.013 回答