Линии фоновой сетки, нарисованные CSS3, начинаются с половины сетки

У меня есть фон с линиями сетки, нарисованными с помощью CSS. Вы можете увидеть это в этой скрипке

Выглядит нормально, но сетка начинается с четверти квадрата, а я хочу, чтобы она начиналась с целого квадрата. Как это сделать?

Я пытался использовать margin-left -50px;, но это также влияет на содержимое этого DIV (чего я не хочу).

CSS:

.board {
    position: absolute;
    margin: 0px;
    top: 0px;
    left: 0px;
    width: 576px;
    height: 576px;
    background-color: #434343;
    background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
    background-size: 100px 100px;
}

Любые идеи по этому поводу?


css gridlines
person Maurice    schedule 09.10.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете добавить элемент background-position в свой класс:

.board {
    background-position: 27px 27px;
}

Первое значение — это горизонтальное положение, а второе — вертикальное. Вы также можете использовать % вместо px

person jleggio    schedule 09.10.2014
comment
Добро пожаловать! Рад, что смог помочь. - person jleggio; 10.10.2014

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, добавьте некоторые пояснения к вашему ответу. Только код публикации может сбить с толку. - person André Kool; 11.10.2016