Вертикальный слайдер, когда слайд вниз изображения фона сжат

Question

Я использовал плагин jquery-ui для реализации функции вертикального слайдера. Я хочу реализовать эффект градиента, поэтому я использую фоновые изображения, включая bg/range и handle slide. Вопрос в том, когда я перемещаю ручку точки вниз, изображение 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 Применительно к вертикальной панели становится иначе. Когда ползунок перемещается вниз, высота вертикальной панели составляет менее 60 пикселей (значение, установленное для границы-радиуса), поэтому фактический радиус границы будет уменьшен.

Простое решение этой проблемы - добавить min-height ограничение на этот элемент, который вы можете обратиться к обновленной скрипке (добавить min-height: 60px в строке 79 CSS).

Более подробно о поведении дескриптора браузера border-radius, обратитесь к разделу Cornor Overlap спецификации.