CSS 5平方背景圖案

Question

我正在尋找簡潔的CSS解決方案來爲元素背景創建特定圖案。該模式是很小的一個用紅點在本頁面的頂部：

這裏是上面的圖片放大，以便更容易看到這個模式：

我只關心紅點模式，而不是邊界。

我試圖像許多變化下面，但似乎無法破解它：

div { 
    background-image: 
    linear-gradient(-45deg, red 25%, transparent 25%), 
    linear-gradient(45deg, red 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, red 75%), 
    linear-gradient(-45deg, transparent 75%, red 75%); 
    background-size: 2px 2px; 
    background-position: 40.5% 0, 40.5% 52%, 0 0, 0.05% 52%; 
} 

Answer 1

雖然@haxxxton上面去了他的回答董事會和我讚揚它，我最終想出如何只用CSS做到這一點。

它與樣本背景圖案完全匹配，並且很容易更改顏色。

這裏是我想出了：

.background { 
    background-color: white; 
    background-image: 
    repeating-linear-gradient(-45deg, transparent, transparent 33%, red 0%, red 50%), 
    repeating-linear-gradient(-45deg, transparent, transparent 33%, white 0%, white 50%), 
    repeating-linear-gradient(-45deg, transparent, transparent 33%, white 0%, white 50%), 
    repeating-linear-gradient(45deg, transparent, transparent 33%, red 0%, red 50%); 
    background-size: 4px 4px; 
    background-position: -1px, 2px, 1px 1px; 
} 

Answer 2

我已成功使用CSS僞元件:before和重複的:after爲「蓋」部分以模擬模式「棋盤」紅色和白色背景。不幸的是，這需要您使用除transparent以外的顏色作爲紅色的「間隙」，以便後面的瓷磚可以「覆蓋」紅色棋盤部分。

下JsFiddle使用transform:scale(10)更好地顯示模式，林不知道，如果你打算把內容在這樣的背景元素裏面，但我想表明的是，僞元素坐在後面的任何內部的內容，但下面的代碼只是包含了相關的CSS

.background { 
    height:100px; 
    width:100px; 
    position:relative; 
    background-image:linear-gradient(45deg, red 25%, transparent 25%, transparent 75%, red 75%, red), 
     linear-gradient(45deg, red 25%, white 25%, white 75%, red 75%, red); 
    background-size: 2px 2px; 
    background-position:0 0, 1px 1px; 
} 
.background:after, 
.background:before{ 
    content:""; 
    /* position the psuedo elements entirely over the background */ 
    top:0; 
    left:0; 
    position:absolute; 
    height:100%; 
    width:100%; 
    /* create "cover" gradients */ 
    background-image:linear-gradient(45deg, white 25%, transparent 25%); 
    background-size:4px 4px; 
    background-position:0 0; 
    background-repeat:repeat; 
    /* set a negative z-index so content is above it */ 
    z-index:-1; 
} 
.background:before{ 
    background-position:2px 2px; 
} 

---

UPDATE

從服用的base64 PNG生成代碼並對設計進行硬編碼，我們最終得到了JS，它將輸出您需要製作html電子郵件背景圖片的圖片代碼。您只需根據需要更改color1和color2變量。

JSFIDDLE

JS

//create a new canvas element to hold the sized down pattern 
var output = document.getElementById('base64-code'); 
var patcanvas = document.createElement('canvas'); 
var patcontext = patcanvas.getContext('2d'); 
var color1 = [255,0,0,1]; // red 
var color2 = [255,255,255,1]; // white 
var matrix = [ 
    [color2, color1, color2, color1], 
    [color1, color2, color2, color2], 
    [color2, color1, color2, color1], 
    [color2, color2, color1, color2] 
]; 
/* 
     the matrix variable represents the width, then height of the pattern, so we're sort of drawing it on its side and mirrored 
     .#.# 
     #... 
     .#.# 
     ..#. 

     will result in 
     .#.. 
     #.#. 
     ...# 
     #.#. 
    */ 

function drawPattern() { 
    //set width and height, which also clears the canvas 
    patcanvas.width = 4; 
    patcanvas.height = 4; 

    for (var i = 0; i < matrix.length; i++) { 
     for (var j = 0; j < matrix[i].length; j++) { 
      if (matrix[i][j] != 0) { 
       tileColor = matrix[i][j]; 
       patcontext.fillStyle = "rgba(" + tileColor[0] + ", " + tileColor[1] + ", " + tileColor[2] + ", " + tileColor[3] + ")"; 
       patcontext.fillRect(i, j, 1, 1); 
      } 
     } 
    } 

    //get the preview canvas and clear it as well 
    var pcanvas = document.getElementById("preview-canvas"); 
    pcanvas.width = pcanvas.width; 
    var pcontext = pcanvas.getContext("2d"); 

    //create a pattern from the pattern canvas and fill the preview canvas with it 
    var pattern = pcontext.createPattern(patcanvas, "repeat"); 
    pcontext.rect(0, 0, pcanvas.width, pcanvas.height); 
    pcontext.fillStyle = pattern; 
    pcontext.fill(); 

    //also update the code 
    var dataURL = patcanvas.toDataURL("image/png"); 
    output.innerHTML = dataURL; 
}; 
drawPattern();