CSS 5方形背景图案 [英] CSS 5-square background pattern

问题描述

我正在寻找一种简洁的CSS解决方案来为元素的背景创建特定的图案.该模式是在页面顶部带有红点的微小模式:

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

推荐答案

虽然@haxxxton的回答很重要，但我对此表示赞赏，但最终还是弄清楚了如何仅使用CSS做到这一点.

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.

这是我想出的:

.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方形背景图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！