CSS 백그라운드 이미지를 사용하여 오프셋이있는 그래디언트를 사용하여 출력 격자

Question

CSS를 사용하여 반복되는 배경 격자를 출력해야합니다.

나는 그렇게하기 위해 repeating-linear-gradient() 기능을 사용하기 위해 관리했습니다, 그것은 큰 표시되는 :

그런 다음, 그러나, 나는 100 픽셀로 가로 축에 그리드를 이동해야합니다. 내가 그렇게 할 background-position 속성을 추가 한

는 :

하지만, 결국, 그것은 나에게 이상한 결과를 제공합니다. 불필요한 수직선이 그려집니다.

흥미롭게도이 줄은 컴퓨터 화면에 고정되어 있으므로이 줄의 크기를 조정하면이 줄이 함께 움직이지 않는 것을 볼 수 있습니다. I've recorded a video to demonstrate.

왜 이런 일이 발생하고 있으며이 동작을 어떻게 상쇄합니까?

오프셋으로 이동 된 그리드를 그리는 다른 방법이 있습니까?

Please, take a look at this JSFiddle.

: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

당신은 background-size를 사용하여 문제를 해결할 수 linear-gradient 대신 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

나는이 유물의 원인이 무엇인지 정말 모르겠어요

그리고 여기 내가 사용하고 코드입니다 처음에는 아마 배경 크기와 관련이있을 것입니다.

마지막으로, 나는 모두 배경 - 이미지에 대한 다음과 같은 CSS 속성을 추가하여이 문제를 극복하기 위해 관리했습니다 :이 경우

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