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

Question

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

#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的值），因此实际的border radius会变小

解决此问题的一个简单方法是向该元素添加一个 min-height 约束，您可以参考更新后的 fiddle（在 [=22 的第 79 行添加 min-height: 60px =]).

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

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

Vertical slider when slide to bottom background-image is compressed

javascript

css

jquery-ui

jquery-ui-slider