要铺满全屏并保持清晰菱形，需用两层45度与-45度线性渐变叠加，色标设为25%，background-size设为相同宽高的正方形值（如24px），并确保html和body高度100%且无margin。
linear-gradient 怎么写才能铺满全屏又保持菱形
直接用
linear-gradient(45deg, #000 25%, transparent 25%) <p>这个角度和色标组合是关键：45deg 确保斜线方向，25% 是让颜色块刚好在对角线上截断，形成等边菱形单元。但只写这一层会得到斜条纹，不是独立菱形——必须叠加第二层反向渐变。</p>
- 单层
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，边缘就发虚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
