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

Remove or blur line on horizontal scroll?

本文关键字：滚动 模糊 水平 删除      更新时间：2023-09-26

我正在开发一个使用"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
}

这是工作小提琴。我给幻灯片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;
}

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

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

小提琴

一个选项是将主体上的背景颜色设置为黑色。

或者，您可以在每个幻灯片背景上设置背景颜色。在本例中，我将两张图像的背景色都设置为黑色：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;
}
相关文章：