javascript - 如何在网页中实现网格背景效果-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

javascript - 如何在网页中实现网格背景效果

怪我咯 2017-04-11 12:28:51

0

4

668

想在网页中画出很小的网格(如图)作为网页的背景，覆盖整个网页，这个的实现思路方法是什么？最好能适应各种设备

怪我咯

走同样的路，发现不同的人生

reply all(4)

小葫芦2017-04-11 12:30:51 4 floor

如果是这种小格子的话，可以采用linear-gradient(transparent 90%, #CCC 90%);再结合background-size: 5% 5%;自动重复就可以了。

这是DEMO:
DEMO

Like +0

Add Reply

迷茫2017-04-11 12:30:51 3 floor

找一个小格子的图片作为背景，repeat-x ，repeat-y

更新：
实在是找不到好看的字符画成格子啊，思想就是循环，题主试下看看。做背景的话要考虑层级。。

for(var a = 0; a<20; a++){
    for(var i=0;i<20;i++) {
        var s = '┍'
        document.write(s);
    }
    document.writeln("
");
}

Like +0

Add Reply

黄舟2017-04-11 12:30:51 2 floor

一般是用背景图片

Like +0

Add Reply

黄舟2017-04-11 12:30:51 1 floor

直接设一个小方块为背景，默认会重复排列的至铺满

Like +0

Add Reply

Php8, I'm coming too