“ repeat-x”僅在移動設備中弄亂圖像

Question

我有一個透明的.png作為重復的背景圖像（repeat-x），在桌面上看起來不錯，但是在移動設備上觀看時，它的頂部看起來像是“ repeat-y”的小條：

源圖像文件的寬度為300px，高度為100px，該div的CSS如下所示：

background: url("../img/leaf-pattern-border.png") 0 0 repeat-x scroll transparent;
height: 100px;

頁面上的其他圖像都很好，因此作為測試，我將其更改為“ no-repeat”，問題就消失了！ 因此看來，“ repeat-x”讓事情變得怪異。 有誰知道我該如何擺脫這種薄弱的邊緣/邊界/偽影東西？

Answer 1

我最終調整了容器div的位置，並對其進行了修復。 感謝@DannyBarber的幫助:)