压缩滑动到底部背景图像时的垂直滑块

Question

我用jquery-ui插件实现了垂直滑块功能。我想实现渐变效果，所以我使用背景图像，包括 bg/range 和滑动手柄。问题是当我将点手柄滑动到底部时，bg 图像被压缩。这是我的示例代码。

js小提琴

#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;
}

和水平滑块一样的方式很好！这让我很困惑。感谢您的阅读和帮助。

Answer 1

问题不在于背景图像被压缩，而在于应用于顶点条border-radiusCSS 规则变得不同。当滑块滑动到底部时，顶点条的高度小于 60px(您设置为边框半径的值(，因此实际边框半径将减小。

解决此问题的简单方法是向该元素添加一个min-height约束，您可以参考更新的小提琴(在 CSS 的第 79 行添加min-height: 60px(。

有关浏览器句柄border-radius行为的更多详细信息，请参阅规范的 Cornor 重叠部分。