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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

相关推荐
心灵彼岸-诗和远方2 小时前
DevOps业务价值流:架构设计最佳实践
运维·产品经理·devops
梓贤Vigo7 小时前
【Axure高保真原型】2级下钻条形图
交互·产品经理·axure·原型·中继器
鸭鸭梨吖8 小时前
产品经理笔记
笔记·产品经理
Jing_jing_X9 小时前
小程序开发进阶之路: 重新认识产品经理
产品经理
MediaTea9 小时前
七次课掌握 Photoshop:选区与抠图
ui·photoshop
不秃头的UI设计师13 小时前
UI界面设计入门:打造卓越用户体验
ui·ux·ui设计
心灵彼岸-诗和远方13 小时前
Devops业务价值流:软件研发最佳实践
运维·产品经理·devops
梓贤Vigo13 小时前
【Axure高保真原型】PDF阅读器
交互·产品经理·axure·原型·中继器
梓贤Vigo14 小时前
【Axure视频教程】多选按钮控制元件显示和隐藏
交互·产品经理·axure·原型·中继器
未来的嗒嘀嗒14 小时前
Axure是什么软件?全方位解读助力设计入门
ui·photoshop