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

Question

我使用jquery-ui插件来实现垂直滑块功能。我想实现渐变效果，所以我使用背景图片，包括bg / range和slide handle。问题是当我将点手柄滑动到底部时，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;
}

与水平滑块相同的方法很好！那令我困惑。感谢您的阅读和帮助。

Answer 1

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

对此问题的一个简单修复是向该元素添加min-height约束，您可以参考更新后的fiddle（在CSS第79行添加min-height: 60px）。

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