方形图案作为背景上的div(纯CSS)

Question

我试图找到如何构建这个模式,使用平行正方形(每个正方形约3px)作为背景使用css(不使用图像背景和重复X轴)作为背景.我只能找到国际象棋模式,但事实并非如此.任何人都可以帮我解决这个挑战吗？真谢谢你!

我在谷歌搜索了几个小时如何在这里制作这个模式:

Answer 1

虽然您的特定示例使用重复图像更容易制作,但使用纯CSS可以实现更有趣的效果,因此它不是无用的技能.和往常一样,在尝试学习与网络相关的东西时,MDN是一个很好的起点,并且有一篇关于CSS渐变的非常好的文章.这是它的缺点.

CSS渐变是返回图像的函数.最简单的是linear-gradient.在脑海中画一条水平线,沿着这条线放置一系列点,然后为其指定颜色.该功能将自动使这些点之间的颜色过渡平滑.

body {
  background-image: linear-gradient(to right, black 0%, black 50%, green 75%, yellow 100%);
}

正如你所看到的那样,渐变是从左边开始的纯黑色,直到我们到达中间(50%),然后它开始淡化为绿色,最后变为黄色.这种现代和冗长的语法非常直观.我们实际上可以删除一些以获得相同的效果.

body {
  background-image: linear-gradient(to right, black 50%, green 75%, yellow);
}

这一次,我们摆脱了black 0%停止.如果我们没有0%的停止,则第一站的颜色仅用于填充空白区域.我们也没有指定最后一站的位置(黄色),所以它自动放置在100%.

当我们在同一点设置两个连续色停时,我们得到了有趣的结果:

body {
  background-image: linear-gradient(
    to right,
    black, black 50%,
    green 50%, green 75%,
    yellow 75%, yellow
  );
}

在这里,我们告诉梯度函数从开始到50%为黑色,然后从50%到75%为绿色,然后从75%到最后为黄色.通过在色标之间留下空间,我们滥用渐变来产生纯色.当然我们不需要第一个黑色和最后一个黄色.

我还没有提到的是生成的渐变实际上并不是整个元素的大小,它实际上像任何背景图像一样平铺在整个元素上.如果我们改变渐变的角度,它就会变得非常明显.

body {
  background-image: linear-gradient(
    45deg, black 50%, green 50%, green 75%, yellow 75%
  );
  background-size: 100% 40px;
}

正如您所看到的,渐变现在处于45度角,因此它呈现三角形,但它只有40px高并且平铺,这会产生一个有趣的锯齿形.

由于梯度函数生成图像,我们实际上可以平铺所述图像以创建重复图案.我更喜欢在制作渐变时使用百分比,然后使用background-size指定渐变的总大小,如下所示:

body {
  background-image: linear-gradient(to right, #617ca2 50%, #28487d 50%);
  background-size: 10px 10px;
}

这将创建一个#617ca2从0到50%的梯度,然后#28487d从50到100%,并将100%视为10px.

最后一招是我们可以拥有多层背景,并在渐变中使用透明色.

body {
  background-image: linear-gradient(to bottom, transparent 50%, #28487d 50%),
                    linear-gradient(to right, #617ca2 50%, #28487d 50%);
  background-size: 10px 10px, 10px 10px;
}

您也可以直接使用重复线性渐变,但是您必须设置渐变的像素,并且在第一个和最后一个颜色停止时更加明确.我对这种方法不熟悉,结果可能略有不同.

body {
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 5px, #28487d 5px, #28487d 10px),
                    repeating-linear-gradient(to right, #617ca2, #617ca2 5px, #28487d 5px, #28487d 10px);
}