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来模拟模式，以及＃34;覆盖＆＃34;重复＆＃34;棋盘的一部分＆＃34;红色和白色背景。不幸的是，这要求您使用transparent以外的颜色来表示＆＃34;间隙＆＃34;在红色，以便后面的瓷砖可以覆盖＆＃34;红色的棋盘部件。

以下JsFiddle使用transform:scale(10)来更好地显示模式，我不确定您是否打算将内容放在具有此背景的元素内，但我想表明psuedo元素位于任何后面内部内容，但以下代码只包含相关的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平方的背景图案

2 个答案: