用途:该技能帮助开发者使用 SGDS 的透明度工具类,控制页面元素的透明与淡出效果,适合水印、禁用态、图片遮罩、弹窗背景、悬浮显示等需要视觉透明度调整的场景。
主要能力:所有透明度类采用 sgds:opacity-{value} 命名,带 sgds: 前缀。可用取值包括 sgds:opacity-0(完全透明)、sgds:opacity-5、sgds:opacity-10、sgds:opacity-20、sgds:opacity-25、sgds:opacity-30、sgds:opacity-40、sgds:opacity-50(半透明)、sgds:opacity-60、sgds:opacity-70、sgds:opacity-75、sgds:opacity-80、sgds:opacity-90、sgds:opacity-95、sgds:opacity-100(完全不透明,默认)。
使用方式:需先完成 sgds-utilities-setup 技能的配置。透明度工具类需要引入工具类 CSS,但不需要主题文件。按用途选择等级:0–20% 适合水印、极淡图案和分隔线;25–40% 适合禁用态、加载骨架、图片叠加;50–70% 适合弹窗或抽屉背景、悬浮显示效果;75–90% 适合气泡、半透明卡片、提示背景;95–100% 用于正常可见内容。
限制与建议:对重要文字优先使用语义令牌(如 sgds:text-subtle、sgds:text-muted),而非降低透明度。可将透明度与 CSS transition 结合,实现平滑的悬浮或显示效果。资料未提供安装命令、代码示例与收费信息。