[英]Vertical slider when slide to bottom background-image is compressed
I used jquery-ui plugin to realize vertical slider function. 我使用jquery-ui插件来实现垂直滑块功能。 I want to realize gradient effect, so I use background images, include bg/range and slide handle.
我想实现渐变效果,所以我使用背景图像,包括bg / range和滑动手柄。 The question is when I slide dot handle to bottom, bg image is compressed.
问题是当我将圆点手柄滑到底部时,bg图像被压缩。 Here is my example code.
这是我的示例代码。
#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;
}
and the same way to horizontal slider is fine! 和水平滑块的相同方法也可以! That's confusing me.
那使我感到困惑。 Thanks for your reading and help.
感谢您的阅读和帮助。
The problem is not that the background image is compressed, but the CSS rule border-radius
applied to the verticle bar becomes different. 问题不在于背景图像被压缩,而是应用于顶点栏的CSS规则
border-radius
变得不同。 When slider slides to the bottom, the height of the verticle bar is less then 60px (the value you set to border-radius), thus the actual border radius will be decreased. 当滑块滑到底部时,垂直栏的高度小于60px(您设置为border-radius的值),因此实际的边框半径将减小。
A simple fix to this problem is add a min-height
constraint to that element, which you can refer to the updated fiddle (add min-height: 60px
at Line 79 of CSS). 解决此问题的一个简单方法是向该元素添加一个
min-height
约束,您可以引用更新的小提琴 (在CSS的79行添加min-height: 60px
)。
For more detail about the behavior of browser handle border-radius
, refer to Cornor Overlap section of specification. 有关浏览器句柄
border-radius
行为的更多详细信息,请参见规范的Cornor Overlap部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.