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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

相关推荐
syj_1113 小时前
初识ArkUI
ui·arkts·arkui
芋芋qwq11 小时前
Unity UI射线检测 道具拖拽
ui·unity·游戏引擎
鸿蒙自习室11 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
大霞上仙14 小时前
element ui table 每行不同状态
vue.js·ui·elementui
梓贤Vigo19 小时前
【Axure视频教程】自制上传按钮
交互·产品经理·axure·原型·教程
栈老师不回家1 天前
Element UI 组件库详解【Vue】
前端·vue.js·ui
我码玄黄1 天前
Figma入门-设计过程基本操作
产品经理·figma·交互设计·原型图
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
Jing_jing_X1 天前
心情追忆-首页“毒“鸡汤AI自动化
java·前端·后端·ai·产品经理·流量运营
wyh要好好学习1 天前
WPF数据加载时添加进度条
ui·wpf