Как даже строки будут сдвинуты при использовании фонового изображения

Я пытаюсь использовать background-image для создания div, используя этот код:

square {
        width: 1000px;
        height: 1000px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100" height = "40"><image width = "40" height = "40" xlink:href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII = " /></svg>');
        background-repeat: repeat;
      }

Но у меня выровнен блок вертикальных линий. Я хочу сдвинуть четные строки на несколько пикселей вправо и не выровнять все строки по вертикали. Я пробовал этот код:

 .square:nth-child(even) {
        background-size: 10px right;
      }

Но это не работает. Есть ли какое-нибудь решение, чтобы исправить это?

  .square {
        width: 1000px;
        height: 1000px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100" height = "40"><image width = "40" height = "40" xlink:href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII = " /></svg>');
        background-repeat: repeat;
      }
      
      .square:nth-child(even) {
        background-size: 10px right;
      }
     
 <div class = "square">
    </div>

Обновлено:

Я попытался создать шаблон, похожий на шаблон шахматной доски, используя это:

.container {
    width: 1000px;
    height: 1000px;
   margin:0;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100" height = "40"><image width = "40" height = "40" xlink:href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII = " /></svg>'), url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100" height = "40"><image width = "40" height = "40" xlink:href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII = " /></svg>');
    background-repeat: no-repeat;
    background-position:  left 40px top, left 40px
}
<div class='container'>
</div>

Однако, когда я устанавливаю background-repeat: repeat, результат не тот, который я ищу:

.container {
    width: 1000px;
    height: 1000px;
   margin:0;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100" height = "40"><image width = "40" height = "40" xlink:href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII = " /></svg>'), url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" width = "100" height = "40"><image width = "40" height = "40" xlink:href = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFVJREFUeNrs2EENgEAQBMGBoOOsgLQTgaB1dV9Cggf2Ua2g3r2te5xJrvSsjg83mwLnnuYBAgICAgICAgICAgICAgICAgICAgIC/tV7+St9L389AgwA9YgGfH7VrXwAAAAASUVORK5CYII = " /></svg>');
    background-repeat: repeat;
    background-position:  left 40px top, left 40px
}
<div class='container'></div>

Вы хотите шаблон шахматной доски?

Temani Afif 14.02.2023 14:49

@TemaniAfif да

Slim 14.02.2023 14:51
stackoverflow.com/a/55455760/8620333
Temani Afif 14.02.2023 14:51

У вас есть только один div в вашем примере, поэтому вы не знаете, как вы ожидаете, что правило css будет применяться к нему.

epascarello 14.02.2023 14:57

Похоже, вы могли бы просто сделать свой SVG двумя квадратами, поэтому, когда он повторяется, он создает шаблон.

epascarello 14.02.2023 14:58

@epascarello, не могли бы вы подробнее объяснить свою идею, пожалуйста?

Slim 14.02.2023 15:17

Итак, вы делаете SVG с двумя строками в виде шахматной доски, и это будет то, что вы хотите.

epascarello 14.02.2023 16:12

@TemaniAfif Я пытался сделать что-то похожее на шаблон шахматной доски, но думаю, что что-то упустил в коде. Проблема в том, что в моей ситуации квадрат orange будет заменен пользовательским svg, а не цветом.

Slim 14.02.2023 17:02
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
8
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте маску, чтобы сделать это:

.container {
  --size: 50px; /* the size of the pattern*/

  height: 100vh;
  background: 
   url(https://picsum.photos/id/1069/200/300) /* your custom SVG here */
   0 0/var(--size) var(--size);
  -webkit-mask: 
   repeating-conic-gradient(#0000 0 25%,#000 0 50%)
   0 0/calc(2*var(--size)) calc(2*var(--size));
}


body {
 margin: 0;
}
<div class='container'></div>

Другие вопросы по теме