javascript - 删除或模糊水平滚动条上的线条？

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

这是工作 fiddle 。我给幻灯片 2 提供了负 1px 左边距，它解决了问题

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;
}