Question

我试图找到如何构建这个模式，使用平行方块（每个方块大约3px）作为背景使用css（不使用图像背景并重复X轴）作为背景。我只能找到国际象棋模式，但事实并非如此。任何人都可以帮我解决这个挑战吗？非常感谢你！

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

Answer 1

虽然使用重复图像更容易制作您的具体示例，但使用纯CSS可以实现more interesting effects，因此它不是无用的技能。一如既往地尝试学习与网络相关的东西时，MDN是一个很好的起点，并且有关于CSS渐变的a pretty good article。这是它的缺点。

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度角，因此它呈现三角形，但它只有40像素高且平铺，这会产生一个有趣的锯齿形。

由于渐变函数生成图像，我们实际上可以平铺所述图像以创建重复图案。我更喜欢在制作渐变时使用百分比，然后使用背景大小指定渐变的总大小，如下所示：

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

Answer 2

随着 support for conic-gradient 现在非常好，您可以很容易地实现这样的方形图案。

body {
  background-size: 10px 10px;
  background-image: conic-gradient(
    #28487d 90deg,
    #28487d 90deg 180deg,
    #617ca2 180deg 270deg,
    #28487d 270deg
  );
}

background-size 将其限制为一个正方形，而 conic-gradient 将该正方形分成四个直角部分，以便随心所欲地着色。

Answer 3

这可以使用css网格来实现。这是它的代码片段：

<html>
    <head>
        <style>
            .container{
                top:5%;
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(10px,1fr));
                grid-gap:3px;
                grid-template-rows: repeat(100,10px);
            }
            .container div{
                background-color:aqua;
            }
        </style>
        <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
        
    </head>
    <body>
        <div class="container"></div>
        <script>
                for(let i=0; i<1000; i++){
                    $('.container').prepend($('<div></div>'));
                }
        </script>
    </body>
</html>

方形图案作为背景上的div（纯CSS）

3 个答案: