要铺满全屏并保持清晰菱形，需用两层45度与-45度线性渐变叠加，色标设为25%，background-size设为相同宽高的正方形值（如24px），并确保html和body高度100%且无margin。
linear-gradient 怎么写才能铺满全屏又保持菱形
直接用
linear-gradient(45deg, #000 25%, transparent 25%)</p> <p>这个角度和色标组合是关键：45deg 确保斜线方向，25% 是让颜色块刚好在对角线上截断，形成等边菱形单元。但只写这一层会得到斜条纹，不是独立菱形——必须叠加第二层反向渐变。</p> <ul> <li>单层 <code>linear-gradient(45deg, #000 25%, transparent 25%, transparent 50%)只能出平行斜线，不是闭合菱形
linear-gradient(45deg, #000 25%, transparent 25%) + linear-gradient(-45deg, #000 25%, transparent 25%)
20px 20px（即菱形边长 ≈ 14px），太大会露白边，太小渲染压力大background-size 多大才不拉伸、不变形
菱形图案本质是正方形平铺单元里画了两条交叉斜线，所以 background-size 必须设为相同宽高的值，比如 20px 20px。设成 20px 30px 就会压扁菱形，变成平行四边形。
- 推荐值：从
16px（细腻）到40px（粗犷）之间选，24px是较通用的平衡点 - 如果用 rem 或 % 单位，务必确保父容器宽高比为 1:1，否则菱形会歪——全屏场景下用
100vh高度时要特别注意视口缩放导致的宽高差 - 别用
cover或contain，它们会破坏平铺规律，菱形就散了
全屏覆盖时 body 和 html 的 height 设置陷阱
即使背景代码全对，html 或 body 缺少高度声明，height: 100% 的背景也不会撑满。常见错误是只设了 html { height: 100% }，却忘了 body 默认有 margin，且未设高度。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写：
html, body { height: 100%; margin: 0; } - 如果页面内容超长，用
min-height: 100vh更稳妥，避免滚动条出现后底部留白 - 某些老浏览器（如 IE11）不支持多层渐变写法，需加
-ms-linear-gradient前缀，但仅限必要兼容场景
透明度叠加导致颜色变深怎么调
两层黑色菱形叠加处会变实黑，想保持单层视觉浓度，得把单层颜色透明度降下来。比如原用 #000，改成 rgba(0,0,0,0.3)，叠加后才是预期灰度。
- 不要用
opacity调整体，它会让整个元素（包括子内容）变透明 - 更灵活的做法是用
hsla()：比如hsla(0, 0%, 0%, 0.3)，方便后续统一改色调 - 如果背景要适配深色模式，建议用
@media (prefers-color-scheme: dark)单独重定义渐变色值，而不是靠 CSS 变量动态算——渐变里的颜色值不响应变量变更
body {
background: linear-gradient(45deg, rgba(0,0,0,0.2) 25%, transparent 25%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 25%, transparent 25%);
background-size: 24px 24px;
margin: 0;
}
真正在意菱形锐利度的人，最后都会去调那 25% 和 background-size 的微小匹配关系——差 1px，边缘就发虚。 
