主题生成器:素材尺寸按视口自适应 + 导出画质可调
- 尺寸单位 4 档:fit(按高)/fitw(按宽)/px/vh,输出 auto clamp(min(calc(100vh-24px),55%),基准,上限),下限让位视口 → 自适应单位永不把图撑出屏幕 - fitw 补上宽幅素材:fit 只按高度缩,16:9 素材在 390 竖屏仍出 1001px 宽(照裁) - 视口预设带高度(含 390×844);layerMetrics 统一出 CSS/预览框/溢出检测,图层编辑区显示实测尺寸并报越界,可一键按当前视口修好 - 窄屏每层策略(原样/缩小/隐藏)+ 缩放系数;修 @media 只覆盖全局、独立配置页面在手机上从不生效的特异性 bug - 导出画质:质量滑块(上限 0.95,Skia 在 q=1 切无损会反常)+ 长边上限,改动后从原图重算 - base.css 新增 --tb-page-position(默认 center center,旧主题不受影响),StaticVersion +1 - 新增 ?dump=fit / ?dump=quality 自检,README 与 _scaffold.css 同步
This commit is contained in:
@@ -35,11 +35,20 @@
|
||||
页面背景 --tb-page-image 整页背景图(cover,fixed)
|
||||
--tb-page-pattern 整页图案(平铺,可叠加在背景图之上)
|
||||
--tb-page-pattern-size 图案平铺尺寸(默认 auto)
|
||||
--tb-page-position 背景焦点(cover 裁切时保留哪一侧,默认 center center)
|
||||
装饰 --tb-deco 装饰图层,固定 10 个槽位(必须写满 10 个,缺的填 none);
|
||||
固定像素尺寸、不随视口裁切,适合放人物/摆件/光斑。默认 none。
|
||||
适合放人物/摆件/光斑。默认 none。
|
||||
值可以是图片,也可以是 linear-gradient / radial-gradient(纯"光")。
|
||||
--tb-deco-size 对应每层的尺寸,如 auto 400px, 100% 100%, auto, …(10 个)
|
||||
想随视口缩就用 clamp,不要写死 px:
|
||||
人物/竖幅 auto clamp(min(calc(100vh - 24px), 231px), 46.67vh, 420px)
|
||||
横幅/场景 clamp(min(calc(100vw - 24px), 587px), 70.57vw, 1067px) auto
|
||||
内层 min() 是兜底:屏幕小到连下限都放不下时让位给视口。
|
||||
background-size 的百分比是相对「容器 − 图片」,和 position 不同,
|
||||
所以用 clamp 比用 % 好推理。
|
||||
--tb-deco-position 对应每层的位置,如 calc(50% - 524px) calc(100% - 36px), …(10 个)
|
||||
两值形式(水平 垂直);别用 left/bottom 关键字混搭成三值,
|
||||
非法时整条声明作废,图层会静默掉回左上角。
|
||||
|
||||
── 素材规格(放 R2,不需要重新编译) ─────────────────────────────
|
||||
页面背景图 2400×1600(3:2)或 2560×1440,WebP q80,≤300KB;明暗各一张:
|
||||
|
||||
Reference in New Issue
Block a user