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

Question

我正在使用 "Skrollr." 开发水平滚动网站我正在尝试排列图片并制作滚动循环。然而，无论我做什么，图片之间似乎都有一条非常细的白线。有没有办法让 sections/pictures 重叠几个像素或任何其他解决方案来解决这个问题？我创建了一个 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 margin-left，它解决了问题

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

或或者，您可以将翻译设置为99.9%，如Scott

所述

#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

一个选项是将正文的背景颜色设置为黑色。

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

我不是 100% 确定，但我相信您运行对图像边缘进行了抗锯齿处理？

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

Answer 3

另一种可能性是稍微缩放幻灯片

#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

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

Remove or blur line on horizontal scroll?

javascript

css

jquery

scroll

skrollr