使用鼠标移动效果时如何修复轮播中的背景图像重叠

Question

我正在尝试使用具有鼠标移动效果的Flickity轮播。轮播中有 3 张背景图片。除了轮播从第 3 张图片过渡到第 1 张图片时，一切都正常，第 3 张图片会显示一秒钟(在第一张图片的顶部(，然后消失。如果看到这一点会有所帮助，这里是：http://www.tishomingofunhere.org/NEW/

我尝试过以各种方式使用 z-index，但这只会改变问题发生的位置。任何帮助将不胜感激。

以下是相关代码： .HTML

.CSS

.carousel-cell {
display: block;
width: 100%;
position: fixed;
height: 512px;
}
#carousel-cell-image1, #carousel-cell-image2, #carousel-cell-image3{
width: 120%;
left:-2%;
top:-2%;
height: 512px;
position: absolute;
background-size: cover;
background-position: center;
transform: scale(1.1);
}
#carousel-cell-image1 {
background-image: url(../images/photos/natchez-trace-parkway1-CROPPED.jpg);
}
#carousel-cell-image2 {
background-image: url(../images/photos/waterskiing.jpg);
}
#carousel-cell-image3 {
background-image: url(../images/photos/retire.jpg);
}
JS
var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 30;
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
$('.carousel-cell').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(moveBackground);
}
$(window).on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (5 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (5 * lMouseY) / 100;
});
moveBackground();

Answer 1

试试这个：

#carousel-cell-image1, #carousel-cell-image2, #carousel-cell-image3{
width: 100%;
background-repeat: no-repeat;
}

Answer 2

用它替换你的代码。

#carousel-cell-image1, #carousel-cell-image2, #carousel-cell-image3{
width: 100%;
left:-2%;
top:-2%;
height: 512px;
position: absolute;
background-size: cover;
background-position: center;
transform: scale(1.1);
}