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

Answer 2

#page { 
     background-color:#269; 
     background-image: linear-gradient(white 2px, transparent 2px), 
     linear-gradient(90deg, white 2px, transparent 2px), 
     linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), 
     linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); 
     background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px; 
     background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px 
    }