代码之家 › 专栏 › 技术社区 › Jorge

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

background css

Jorge · 技术社区 · 7 年前

我试图找到如何构建这种模式,使用css(不使用图像背景并重复X轴)将平行正方形(每个正方形大约有3px)作为div的背景。我只能找到国际象棋的模式,事实并非如此。有谁能帮我应对这个挑战吗?真的非常感谢你!

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

3 回复 | 直到 6 年前

Domino 7 年前

虽然使用重复图像更容易制作特定示例, more interesting effects 可以使用纯CSS实现,所以这不是一个无用的技能。和往常一样,在尝试学习与web相关的知识时,MDN是一个很好的起点,并且 a pretty good article 关于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高,并且平铺,这创造了一个有趣的之字形。

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

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

这会产生一个梯度,即ť617ca2从0到50%,然后357d从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);
}

NomeN 4 年前

使用 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 将正方形按直角分成四个部分,可以随意着色。

-4

parthsw 7 年前

这可以使用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>