CSS 5方形背景图案

我正在寻找一个简洁的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%;
}

---

我已经设法使用CSS psuedo元素

：before

和

：after

来模拟该模式，以“覆盖”重复的“棋盘”红色和白色背景的部分。不幸的是，这要求您对红色的“间隙”使用除透明之外的颜色，以便后面的瓷砖可以“覆盖”红色棋盘部分

下面使用

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;
}

---

更新

从设计中获取base64 png生成器代码并对其进行硬编码，我们最终将使用JS输出制作html电子邮件背景图像平铺所需的图像代码。您只需根据需要更改

color1

和

color2

变量

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();

//创建一个新的canvas元素来保存大小较小的图案
var output=document.getElementById（'base64-code'）；
var patcanvas=document.createElement（'canvas'）；
var patcontext=patcanvas.getContext（'2d'）；
var color1=[255,0,0,1]；//红色
var color2=[255255,1]；//白色
var矩阵=[
[color2，color1，color2，color1]，
[color1，color2，color2，color2]，
[color2，color1，color2，color1]，
[颜色2，颜色2，颜色1，颜色2]
];
/*
矩阵变量表示图案的宽度，然后是高度，所以我们在侧面绘制并镜像
.#.#
#...
.#.#
..#.
将导致
.#..
#.#.
...#
#.#.
*/
函数drawPattern（）{
//设置宽度和高度，这也会清除画布
patcanvas.width=4；
高度=4；
对于（变量i=0；i

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

---

您可以使用类似于生成重复的base64 png的工具，而不是使用一个渐变的好工具。在我的情况下，我需要这个用于GMail电子邮件中的HTML。唯一有效的CSS是内联的，所以我相信这会让psudeo元素从表中消失。我应该在问题中说明这一点，我很抱歉。如果你只是想要一个棋盘格图案，你肯定会这样做，因为“白色加号”的形状使得只用渐变很难做到这一点。老实说，patternify.com网站提供的内联base64图像解决方案很可能是您的最佳解决方案，如果需要这样做的话。图像的问题是所使用的颜色（此处为红色和白色）可以是任何颜色，需要动态设置。因此，梯度或其他CSS机制似乎更可行。@astudent，生成电子邮件html的是什么？php？js？@astudent，如果是js，我已经添加了动态生成所需的base64 png数据的代码。php会有点棘手，因为它需要使用他们的图像和GD库，如果你高兴，我不熟悉它们（我很高兴：），但这与问题中的模式并不“完全”匹配：p但肯定更容易更新，并且应该在html电子邮件中更成功地工作。请注意，html电子邮件背景在某些邮件客户端中存在臭名昭著的问题，因此不要忘记查找一些兼容性表，使用浏览器前缀，并在各种邮件客户端中进行测试。@haxxxton该模式与Chrome和Opera中的示例完全相同，但在Firefox和IE中有所不同：OSX Chrome 55.0.2883.95（64位），在红线之间有白色实线：（与示例不同：）），不管怎样，我很高兴您很高兴：）