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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

相关推荐
文创工作室1 天前
Adobe Illustrator 中文
ui·adobe·illustrator
烛衔溟2 天前
HarmonyOS 基础 UI 构建 —— 组件、布局与沉浸式效果
ui·华为·harmonyos
sunneo2 天前
S5.2 兴趣培养——让用户从“看看“变成“想了解更多“
人工智能·产品运营·产品经理·用户运营·用户体验
一次旅行2 天前
CopilotKit实战:用生成式UI打造智能Agent前端
前端·人工智能·ui
gqk012 天前
Delegate.Target/ Method
前端·ui·xhtml
李二。2 天前
ArkTS原生 | 知识问答引擎 —— 鸿蒙Next声明式UI实战
ui·华为·harmonyos
陈葛杰2 天前
PS2026安装教程
ui·photoshop
Rain5092 天前
mini-cc 终端 UI:用 React 写 CLI 是什么体验
前端·人工智能·react.js·ui·架构·前端框架·ai编程
JensCS猿3 天前
一张好图胜过千言万语:软件工程专业作图分享
产品经理
utmhikari3 天前
【AI原生】用Vibe Coding写产品前端原型的一些经验
前端·ai·产品经理·web·web开发·ai-native·qoder