<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 一个晶格状的画布背景 */html,body{height: 100%;margin: 0;padding: 0;}.container {height: 100%;/* 主要属性 */background-color: #fff;background-image: linear-gradient(45deg, rgb(247, 247, 247) 25%, transparent 25%),linear-gradient(-45deg, rgb(247, 247, 247) 25%, transparent 25%),linear-gradient(45deg, transparent 75%, rgb(247, 247, 247) 75%),linear-gradient(-45deg, transparent 75%, rgb(247, 247, 247) 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0;}.rect{position: absolute;top: 200px;left: 200px;width: 120px;height: 120px;background: pink;}</style>
</head>
<body><div class="container"><div class="rect"></div></div>
</body>
</html>
