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

我已经成功地使用 CSS 伪元素 :before 和 :after 到重复 "checkerboard" 红色和白色背景的 "cover" 部分来模拟模式.不幸的是，这需要你为红色的 "gaps" 使用 transparent 以外的颜色，以便后面的瓷砖可以 "cover" 红色棋盘部分。

后面的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;
}

更新

从 http://patternify.com/ 中获取 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();

Answer 2

虽然@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;
}

CSS 5格背景图案

CSS 5-square background pattern

css

background

background-image