網(wǎng)格
body{
background: white;
background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;
}
桌布方格紋
不管網(wǎng)格多大预侯，線條始終是1px:
body{
background: #58a;
background-image: linear-gradient(white 1px, transparent 0),
linear-gradient(90deg,white 1px, transparent 0);
background-size: 30px 30px;
}
藍(lán)圖網(wǎng)格
body{
background: #58a;
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;
}
更逼真的藍(lán)圖網(wǎng)格
波點(diǎn)
body{
background: #655;
background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
使用偏移定位的波點(diǎn)
sass預(yù)處理器代碼
棋盤(pán)
body{
background: #eee;
background-image: linear-gradient(45deg,#bbb 25%,transparent 0),
linear-gradient(45deg,transparent 75%,#bbb 0),
linear-gradient(45deg,#bbb 25%,transparent 0),
linear-gradient(45deg,transparent 75%,#bbb 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px,15px 15px,30px 30px;
}
用兩個(gè)直角三角形拼接再偏移
