CSS 5-square background pattern

问题

I'm looking for a succinct CSS solution to create a specific pattern for an element's background. The pattern is the tiny one with red dots at the top of this page:

Here is the image above magnified so it is easier to see the pattern:

I care only about the red dot pattern, not borders.

I have tried many variations like the following but can't seem to crack it:

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

回答1:

I have managed to emulate the pattern using CSS psuedo elements :before and :after to "cover" parts of the repeating "checkerboard" red and white background. Unfortunately, this requires you to use a colour other than transparent for the "gaps" in the red, so that the later tiles can "cover" the red checkerboard parts.

The following JsFiddle uses transform:scale(10) to better show the pattern, Im not sure if you intend to put content inside the element with this background, but I wanted to show that the psuedo elements sit behind any internal content, but the following code just contains the relevant 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

Taking the base64 png generator code from http://patternify.com/ and hardcoding the design, we end up with JS that will output the image code you'd need to make the html email background image tiles. You just need to change the color1 and color2 variables as needed.

JSFIDDLE

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

回答2:

While @haxxxton went above board with his answer and I commend it, I ultimately figured out how to do this with CSS only.

It matches the sample background pattern exactly and is easy to change the color.

Here is what I came up with:

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

来源：https://stackoverflow.com/questions/41478639/css-5-square-background-pattern

标签

css

css3

background

background-image