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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

相关推荐
for_ever_love__2 小时前
UI 学习 Appearance 外观管理
学习·ui·ios·objective-c
RReality6 小时前
【Unity Shader URP】简易卡通着色(Simple Toon)实战教程
ui·unity·游戏引擎·图形渲染·材质
UXbot6 小时前
如何用 AI 快速生成完整的移动端 UI 界面:从描述到交付的实操教程
前端·ui·交互·ai编程·原型模式
ai_coder_ai7 小时前
自动化脚本ui编程之下拉列表框控件
ui·autojs·自动化脚本·冰狐智能辅助·easyclick
@Demi7 小时前
Cursor 配置 MasterGo MCP 还原UI设计稿
ui·cursor·mastergo·mcp
戴西软件9 小时前
戴西CAxWorks.VPG车辆工程仿真软件|假人+座椅双调整 汽车仿真效率直接拉满
java·开发语言·人工智能·python·算法·ui·汽车
瑞瑞小安9 小时前
Unity功能篇:文本框随文字内容动态调整
ui·unity
想你依然心痛9 小时前
HarmonyOS 6(API 23)悬浮导航与沉浸光感实战:打造下一代玻璃拟态UI体验
ui·华为·harmonyos·悬浮导航·沉浸光感
Lanren的编程日记1 天前
Flutter鸿蒙应用开发:基础UI组件库设计与实现实战
flutter·ui·harmonyos
螺丝钉code1 天前
设计系统 showdown:Awesome DESIGN.md vs UI UX Pro Max - AI 时代的设计规范新范式
人工智能·ui·ux