Axure 教程 | 设置文本框背景透明

​在AXURE软件中,部件样式可以编辑,但有时却无法满足所有个性化原型的需求。例如文本框部件,可以设置是否隐藏边框,但即使隐藏边框之后,文本框还会有白色的背景。

当界面需要一个无背景色的输入框时,对于完美主义者来说,那无法去除的白色背景就显得尤其无法忍受,现在,就让我们用非常规手段,去了它。

01

建立"文本框背景透明"页面,双击页面名称,打开页面编辑页

02

"部件"窗口,拖一个矩形到编辑页,设置填充颜色:蓝色;再拖一个文本框(单行)放置在矩形的上面。

03

生成原型(注意是生成,不是预览),可以看到文本框(单行)的白色背景遮住了下面的矩形一部分。

04

找到原型生成时,保存的文件地址,找到"文本框背景透明"页面的样式文件:styles.css

05

打开styles.css文件,找到文本框(单行)部件的CSS样式,在样式内增加:opacity:0

06

保存styles.css文件,在浏览器中刷新原型查看效果

相关推荐
行者-全栈开发8 小时前
【鸿蒙心迹】国际化 i18n 与多语言资源管理实战(HarmonyOS 7.x)
ui·华为·重构·国际化·harmonyos·多语言
寂寞的船1 天前
【Unity知识速递】第5期 Unity 6.2 深度解析:AI Assistant 登场,World Space UI 与 Sentis 全面升级
人工智能·ui·unity
秋名山小白1 天前
Playwright UI 自动化测试实战教程
python·ui
不剪发的Tony老师2 天前
Rust重写开源版Photoshop来了,支持PSD编辑,还能让AI Agent直接操作图像
photoshop·图片编辑
wuyk5552 天前
PyQt6-第15讲-数据可视化QChart
python·ui·信息可视化·pyqt
vivo互联网技术3 天前
面向技术产品经理的 Agent Harness 设计:从任务编排到可验证交付
ai·产品经理·agent设计·harness engineering·权限策略
Autumn_ing4 天前
AI Skills 怎么用于原型设计?把需求澄清、页面生成和测试接起来
产品经理·墨刀·skill·墨刀ai客户端·ai原型·原型skill·设计skill
車瑜9114 天前
PM-Skills42个链式工作流-数据分析
开源·产品经理·pm·pm-skills
Autumn_ing4 天前
Pixso AI 如何按团队设计规范生成 UI?以消息设置页说明选库与验收
人工智能·ui·设计规范·pixso