Как видно в этом примере, когда я использую blur(5px), картинка становится меньше на 5 пикселей из-за блура и можно видеть по краям цвет (от другой картинки).
$(document).ready(function() {
$('.main-carousel').slick({
accessibility: 'true',
arrows: 'true',
slidesToShow: 1,
slidesToScroll: 1
});
});
.main-image {
filter: blur(5px);
}
Вопрос: Как сделать так, чтоб не было этой рамки из-за размытия, чтоб она обрезалась или еще как-нибудь, чтоб картинка нормально выглядела? Может есть какой-нибудь другой способ, или плагин, который делает блур качественнее?
Ответ
$(document).ready(function(){ $('.main-carousel').slick({ accessibility: 'true', arrows: 'true', slidesToShow: 1, slidesToScroll: 1 }); }); .main-image { filter: blur(5px); } .slick-initialized .slick-slide { overflow: hidden; }
overflow: hidden; для слайда. Лучше не объявлять общие стили, а повесить на слайд какой-нибудь класс и прописать hidden для него.
Так же, вот: https://www.w3schools.com/cssref/css3_pr_filter.asp по фильтрам. Лучше использовать префиксы :)
Комментариев нет:
Отправить комментарий