Verwenden von CSS-Hintergrundbild zum Ausgeben von Raster mit Farbverlauf mit Offset

Question

Ich muss ein wiederholendes Hintergrundraster mit CSS ausgeben.

Ich habe es geschafft, die repeating-linear-gradient() Funktion zu verwenden, um so zu tun, und es wird angezeigt groß:

Dann aber ich brauche von 100px das Gitter auf der horizontalen Achse zu verschieben.

I background-position Eigenschaft hinzugefügt haben, dies zu tun:

Aber am Ende, es gibt mir ein seltsames Ergebnis. Einige äußere vertikale Linie ist gezeichnet.

Interessanterweise ist diese Zeile auf dem Computerbildschirm fixiert. Wenn Sie also die Größe des Fensters ändern, sehen Sie, dass sich diese Zeile nicht mitbewegt. I've recorded a video to demonstrate.

Warum passiert es genau und wie begegne ich diesem Verhalten?

Gibt es eine alternative Möglichkeit, ein solches Raster um den Offset verschoben zu zeichnen?

.

Und hier ist der Code Ich verwende:

:root { 
    --background-grid-color: deeppink; 
    --background-fill-color: #000; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    /* Vertical lines */ 
    background-color: var(--background-fill-color); 
    background-image: 
    repeating-linear-gradient(
     to right, 
     var(--background-grid-color) 0, 
     var(--background-grid-color) 1px, 
     transparent 1px, 
     transparent 200px 
    ), 
    repeating-linear-gradient(
     to bottom, 
     var(--background-grid-color) 0, 
     var(--background-grid-color) 1px, 
     transparent 1px, 
     transparent 200px 
    ) 
    ; 
    background-position: 100px 0, 0 0; 
} 

Answer 1

Sie können das Problem beheben, indem background-size mit und linear-gradient statt repeating-linear-gradient:

:root { 
    --background-grid-color: deeppink; 
    --background-fill-color: #000; 
} 

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    /* Vertical lines */ 
    background-color: var(--background-fill-color); 
    background-image: 
    linear-gradient(
     to right, 
     var(--background-grid-color) 0, 
     var(--background-grid-color) 1px, 
     transparent 1px, 
     transparent 100% 
    ), 
    linear-gradient(
     to bottom, 
     var(--background-grid-color) 0, 
     var(--background-grid-color) 1px, 
     transparent 1px, 
     transparent 100% 
    ) 
    ; 
    background-position: 100px 0, 0 0; 
    background-size: 200px; 
} 

Answer 2

Ich bin nicht wirklich sicher, was dieses Artefakt verursacht an erster Stelle, wahrscheinlich ist es irgendwie mit der Hintergrundgröße verwandt.

Schließlich habe ich es geschafft, dieses Problem zu überwinden, indem Sie die folgenden CSS-Eigenschaften für beide Hintergrund-Bilder ergänzt:

background-size: 200px 200px, 200px 200px;