CSS3绘制的背景网格线以半格开头

Question

我有一个使用 CSS 绘制网格线的背景。 You can see it in this fiddle

看起来不错，但网格从四分之一的正方形开始，我希望它从整个正方形开始。如何做到这一点？

我尝试过使用 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;
}

对此有什么想法吗？

Answer 1

您可以将 background-position 元素添加到您的类中:

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

第一个值是水平位置，第二个值是垂直位置。您还可以使用 % 而不是 px