网格背景棋盘实现纯css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网格</title> <script>document.documentElement.style.fontSize = document.documentElement.clientWidth /750 * 100 + 'px';</script> <style> html,body{ height: 100%; } .content{ background-image: linear-gradient(90deg, rgba(235, 235, 235, 1) 10%, rgba(0, 0, 0, 0) 10%),linear-gradient(rgba(235, 235, 235, 1) 10%, rgba(0, 0, 0, 0) 10%); background-size: .2rem .2rem; width: 100%; height: 100%; } </style> </head> <body> <div class="content"></div> </body> </html>
效果图