Question

我正在使用“Skrollr”在水平滚动网站上工作。我试图排列图片并进行滚动循环。然而，无论我做什么，图片之间似乎都有一条非常细的白线。反正有没有让部分/图片重叠几个像素或任何其他解决方案来解决这个问题？我创建了一个JSFiddle来演示这个问题。我还列出了我的基本设置。

https://jsfiddle.net/9xvu128g/

更新：无论使用哪种图像，都会发生这种情况，请参阅第二篇JSFiddle： https://jsfiddle.net/9xvu128g/5/

#slides-container{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#slides{
width: 200%;
height: 200%;
position: fixed;
top: 0;
left: 0
}

Answer 1

这是工作小提琴。我给了一个负1px的边距 - 滑到2，它解决了问题

https://jsfiddle.net/vndgqndc/

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    -ms-transform: translate(100%, 0%); /* IE 9 */
    -webkit-transform: translate(100%, 0%); /* Chrome, Safari, Opera */
    transform: translate(100%, 0%);
     z-index: -1000;
     margin-left: -1px;
}

或或者，您可以按照Scott的说明将翻译设置为99.9％

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    -ms-transform: translate(99.9%, 0%); /* IE 9 */
    -webkit-transform: translate(99.9%, 0%); /* Chrome, Safari, Opera */
    transform: translate(99.9%, 0%);
     z-index: -1000;
     margin-left: 0px;
}

Answer 2

另一个可能性是略微缩放幻灯片

#slide-2{
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    transform: translate(100%, 0%) scale(1.001);
     z-index: -1000;
}

fiddle

Answer 3

一种选择是将身体背景颜色设置为黑色。

或者，您可以在每个幻灯片背景上设置背景颜色。在此示例中，我在两个图像上将背景颜色设置为黑色：https://jsfiddle.net/vdtaylor/9xvu128g/7/

我不是百分百肯定，但我相信你在图像的边缘遇到了抗锯齿？

#slide-1 {
    background: url('http://i.imgur.com/LLxbI.jpg') no-repeat center center;
    background-size: cover;
    z-index: -1000;
    background-color: #000;
}

在水平滚动上删除或模糊线条？

3 个答案: