在水平滾動上移除或模糊線條？

我正在使用「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 
}

來源

2016-07-19 AndrewLeonardi

看起來，圖像本身沒有正確設置爲平鋪的無縫連接。 – Scott

嘿斯科特。無論使用何種圖像，都會發生此情況檢查出來 – AndrewLeonardi

https://jsfiddle.net/9xvu128g/1/ – AndrewLeonardi

這裏是工作提琴。我給予了否定的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; 
}

OR 或者，您可以設置由斯科特

指出翻譯至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; 
}

來源

2016-07-21 20:24:27

這幾乎可以解決問題。問題是如果您有兩張以上的幻燈片左右停止工作。此外，我不得不在99.9％和200.01％之間切換，以便在兩張以上的幻燈片上工作。如果沒有更多正式答案，可能會將此標記爲正確。謝謝您的幫助！ – AndrewLeonardi

一種選擇是將背景顏色設置爲黑體。

或者，您可以在每張幻燈片背景上設置背景顏色。在這個例子中，我將兩個圖像的背景顏色設置爲黑色：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; 
}

來源

2016-07-21 20:26:54

另一個posibility將略微擴展幻燈片

#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

來源

2016-07-24 15:53:35 vals

我有一個快速發揮這個，這是我能找到的最好的解決方案。 –

在水平滾動上移除或模糊線條？

回答

相關問題