深空配色
规格对照
下之前先看清尺寸和体积
每款素材都标了默认分辨率与压缩后的体积，替换时按位置对号入座，不用反复试大小。
| 素材 | 默认尺寸 | 文件格式 | 单张体积 | 建议位置 |
|---|---|---|---|---|
| 深空渐变底 | 2560 × 1440 | WebP / PNG | 约 420 KB | 通栏首屏、页面顶部大图 |
| 银河星轨 | 1920 × 1080 | WebP / PNG | 约 310 KB | 板块之间的窄幅分隔带 |
| 极光夜空 | 2400 × 1200 | WebP / PNG | 约 380 KB | 深色下载区、活动页头图 |
| 星点纹理 | 1200 × 1200 | PNG 透明底 | 约 180 KB | 卡片、表单、页脚分区底纹 |
| 移动端裁切版 | 1080 × 1440 | WebP | 约 160 KB | 手机竖屏首屏 |
压缩与加载
背景图最容易被加载速度拖住。素材包内每款图都给了 WebP 与 PNG 两个版本，WebP 优先放到线上，PNG 留给需要二次处理的场合。
- 首屏背景加 fetchpriority 与预加载，其余背景交给浏览器延迟加载
- 移动端用媒体查询换小尺寸版本，或先用纯 CSS 渐变兜底
授权与署名
素材可用于个人主页、企业官网与客户项目，修改颜色、裁切比例、叠加文字都不需要额外申请。把素材本身打包转售不在授权内。
- 需要署名时按下载说明的格式在页脚加一行
- 同一套配色建议整站统一，避免深色块与浅色块反复跳
更新记录
最近四批素材
每逢周三补图或修图，旧素材保持原路径不变，替换文件即可生效，不用改页面里的引用。
-
2026-03-11
新增移动端竖屏裁切版
为深空渐变底与极光夜空补了 1080 × 1440 版本，手机首屏不再被横向裁掉星点带。
-
2026-02-25
星点纹理改为无缝平铺
重绘四角星分布，解决宽屏下重复排列出现明显接缝的问题，色值仍为纯白透明底。
-
2026-02-04
银河星轨压缩率优化
同画质下体积由 520 KB 降至 310 KB，弱网下首屏文字出现时间提前约半秒。
-
2026-01-14
补齐极光夜空的浅金描边版
给深色下载区加了一条浅金边缘过渡，与星砂金按钮放在一起时不再显得断层。
替换方法
铺进页面之前，先走这两步
01
先定底色，再定正文字色
深色底图配深色文字最容易翻车。选好背景后把正文压在明度最低的区域，标题用月白，次级说明降一档到浅金或青灰，整块读完不会累眼。
- 正文与背景的明度差保持在 4.5:1 以上，深色块里避免使用纯灰
- 按钮统一用星砂金，金色在墨紫底上是唯一不会被吃掉的强调色
02
按断点换图，手机端不用自己裁
横图直接塞进竖屏会被裁掉两侧的星带。素材包里的移动版已经按竖屏重心重新取景，用媒体查询切换文件即可，CSS 结构不用改。
- 断点设在 768px，切换时保留同一张图的主色，避免页面颜色突变
- 平铺纹理在窄屏下调低透明度，防止星点密度过高影响阅读
常见问题
下载前后最常被问到的几件事
背景图下载后铺不满页面，怎么办？
先看容器宽度。通栏首屏建议用 2560 × 1440 的深空渐变底，配合 background-size: cover 与 background-position: center，浏览器会按比例裁切，不会留白。如果只铺某个板块，把容器设为 position: relative，再让背景层 inset: 0，图片就只在这个板块内铺开。
手机上打开，星空背景会不会拖慢加载？
星点纹理和渐变底的压缩率很高，WebP 单张通常在两三百 KB。移动端可以用媒体查询只加载小尺寸版本，或先用纯 CSS 渐变兜底，让文字先出现、背景随后替换，首屏感知速度不会变差。
这些背景能用在客户的商业站点上吗？
可以用于企业官网、活动页和配套的移动端页面。下载包里的说明书写明了可修改、可再分发的范围，把素材本身二次销售不在授权内。需要署名时按说明书给出的格式在页脚加一行即可。
站点换成自己的主色后，星点纹理还能用吗？
可以。星点纹理是透明底 PNG，直接叠在你的主色块上，用 opacity 控制浓淡，通常 0.12 到 0.2 之间最稳。主色偏亮时把纹理由白色换成深空墨色再降低透明度，文字对比度就不会受影响。
下载包里 WebP 和 PNG 该选哪个？
对外访问的页面优先用 WebP，体积小一半左右，主流浏览器都支持；需要印刷、做海报或交给设计软件继续处理时用 PNG。两者文件名一致，替换时不用改 CSS 里的路径。