Я пытаюсь использовать 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>
@TemaniAfif да
У вас есть только один div в вашем примере, поэтому вы не знаете, как вы ожидаете, что правило css будет применяться к нему.
Похоже, вы могли бы просто сделать свой SVG двумя квадратами, поэтому, когда он повторяется, он создает шаблон.
@epascarello, не могли бы вы подробнее объяснить свою идею, пожалуйста?
Итак, вы делаете SVG с двумя строками в виде шахматной доски, и это будет то, что вы хотите.
@TemaniAfif Я пытался сделать что-то похожее на шаблон шахматной доски, но думаю, что что-то упустил в коде. Проблема в том, что в моей ситуации квадрат orange
будет заменен пользовательским svg, а не цветом.
Используйте маску, чтобы сделать это:
.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>
Вы хотите шаблон шахматной доски?