### [分享一个浅色格子的css背景代码](https://guaqi.com/en/topic/75834)

**Published:** 2026-04-24T15:07:44

**Author:** 151532

**Excerpt:** 代码： /* 板块背景（页面整体） */ :root { –gq-page-bg: #f5f7fa; /* 浅色背景 */ } /* 容器背景（内容区域） */ .container { –el-bg-color: #ffffff; /* 白色容器 */ } /* 浅色格子背景 */ .grid-bg { background-color: var(–gq-page-bg); background-image: linear-gradient(to right, rgba(0,0,0,0.05) 1px, tran

代码：

```css
/* 板块背景（页面整体） */

:root {

–gq-page-bg: #f5f7fa; /* 浅色背景 */

}

/* 容器背景（内容区域） */

.container {

–el-bg-color: #ffffff; /* 白色容器 */

}

/* 浅色格子背景 */

.grid-bg {

background-color: var(–gq-page-bg);

background-image:

linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),

linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);

background-size: 28px 28px;

background-position: 0 0, 0 0;

}

/* 暗黑模式 */

@media (prefers-color-scheme: dark) {

:root {

–gq-page-bg: #0f1115;

}

.container {

–el-bg-color: #1a1d22;

}

.grid-bg {

background-image: none; /* 强制统一暗色背景 */

}

}
```



**Comments:** 

**春哥:** 很漂亮！

**151532:** 虚线框点不动

**151532:** 预览：https://hostsns.com/



---