我使用jquery-ui插件来实现垂直滑块功能。我想实现渐变效果,所以我使用背景图像,包括bg / range和滑动手柄。问题是当我将圆点手柄滑到底部时,bg图像被压缩。这是我的示例代码。
jsFiddle
#head_slider .ui-slider-range {
background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}
#head_slider_bg {
position: absolute;
width: 72px;
height: 704px;
right: 100px;
background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}
和水平滑块相同的方式也可以!那使我感到困惑。感谢您的阅读和帮助。
最佳答案
问题不在于背景图像被压缩,而是应用于顶点栏的CSS规则border-radius
变得不同。当滑块滑到底部时,垂直栏的高度小于60px(您设置为border-radius的值),因此实际的边框半径将减小。
解决此问题的一个简单方法是在该元素上添加一个min-height
约束,您可以引用更新后的fiddle(在CSS的第79行添加min-height: 60px
)。
有关浏览器句柄border-radius
行为的更多详细信息,请参见规范的Cornor Overlap部分。
关于javascript - 滑动到底部背景图像时的垂直滑块,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45481915/