【CSS】网格背景

最新推荐文章于 2025-03-19 13:42:47 发布

原创最新推荐文章于 2025-03-19 13:42:47 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

0010.jpg

image.png

CSS代码

background: white;
    background-image: linear-gradient(rgba(26, 129, 195, .5) 50%, transparent 0),
    linear-gradient(90deg ,rgba(26, 129, 195, .5) 50%, transparent 0);
    background-size: 30px 30px;

通过rgba来控制不透明度，配合transparent，形成上图所示的效果。
通过background-size来控制格子的大小。

image.png

CSS代码

background: #31698d;
    background-image: linear-gradient(white 1px, transparent 0),
        linear-gradient(90deg, white 1px, transparent 0);
    background-size: 30px 30px;

有时我们希望网格中的每一个格子的大小都可以调整的同时，网格的线条粗细保持固定。
就可以定义背景色为指定的颜色，white为1px，再通过background-size调整格子的大小。

image.png

CSS代码

background: #31698d;
    background-image: linear-gradient(white 2px, transparent 0),
        linear-gradient(90deg, white 2px, transparent 0),
        linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
        linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
    background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;

在上一个例子的基础上再做修改。

【CSS】背景渐变基础
 【CSS】着色与透明

希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip