diff options
| author | 魏曹先生 <1992414357@qq.com> | 2026-08-16 07:59:16 +0800 |
|---|---|---|
| committer | 魏曹先生 <1992414357@qq.com> | 2026-08-16 07:59:16 +0800 |
| commit | 08116538a79875621dcd05ce6f6569cc62443b95 (patch) | |
| tree | 77e091ea4827c46a70cc3f4b2a9e6eefef562d78 | |
| parent | 95bfb6d4996fba34f60e9dd3d83a692e8a590198 (diff) | |
feat: add grid background pattern to non-hero sections
| -rw-r--r-- | index.html | 85 |
1 files changed, 78 insertions, 7 deletions
@@ -47,7 +47,40 @@ overflow-x: hidden; } - /* Dashed lines along the container (1080px) edges, excluding hero */ + /* 田字格背景（hero 以下的内容区） */ + body > section:not(.hero):not(.cta-banner) { + background-image: + linear-gradient( + to right, + rgba(212, 168, 75, 0.03) 1px, + transparent 1px + ), + linear-gradient( + to bottom, + rgba(212, 168, 75, 0.03) 1px, + transparent 1px + ), + linear-gradient( + to right, + rgba(212, 168, 75, 0.015) 1px, + transparent 1px + ), + linear-gradient( + to bottom, + rgba(212, 168, 75, 0.015) 1px, + transparent 1px + ); + background-size: + 40px 40px, + 40px 40px, + 20px 20px, + 20px 20px; + background-position: + calc(50% - 540px + 20px) 0, + calc(50% - 540px) 0, + calc(50% - 540px + 10px) 0, + calc(50% - 540px + 10px) 0; + } body > section:not(.hero) { position: relative; } @@ -265,6 +298,11 @@ 40px 40px, 20px 20px, 20px 20px; + background-position: + calc(50% - 540px + 20px) 0, + calc(50% - 540px) 0, + calc(50% - 540px + 10px) 0, + calc(50% - 540px + 10px) 0; pointer-events: none; z-index: 0; } @@ -453,7 +491,7 @@ .code-demo { padding: 5rem 1.5rem; - background: #241c16; + background-color: #241c16; display: flex; align-items: center; justify-content: center; @@ -770,11 +808,44 @@ .cta-banner { padding: 4rem 1.5rem; text-align: center; - background: linear-gradient( - 135deg, - rgba(212, 168, 75, 0.06), - transparent - ); + background-image: + linear-gradient( + to right, + rgba(212, 168, 75, 0.03) 1px, + transparent 1px + ), + linear-gradient( + to bottom, + rgba(212, 168, 75, 0.03) 1px, + transparent 1px + ), + linear-gradient( + to right, + rgba(212, 168, 75, 0.015) 1px, + transparent 1px + ), + linear-gradient( + to bottom, + rgba(212, 168, 75, 0.015) 1px, + transparent 1px + ), + linear-gradient( + 135deg, + rgba(212, 168, 75, 0.06), + transparent + ); + background-size: + 40px 40px, + 40px 40px, + 20px 20px, + 20px 20px, + 100% 100%; + background-position: + calc(50% - 540px + 20px) 0, + calc(50% - 540px) 0, + calc(50% - 540px + 10px) 0, + calc(50% - 540px + 10px) 0, + 0 0; display: flex; flex-direction: column; align-items: center; |