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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

相关推荐
传奇开心果编程6 小时前
【传奇开心果系列】Flet框架实现的家庭记账本示例自定义模板
python·学习·ui·前端框架·自动化
公众号【林东笔记】获取资料16 小时前
Adobe Photoshop 2024:软件安装包分享和详细安装教程
ui·adobe·photoshop
全栈软件开发1 天前
PHP域名授权系统网站源码_授权管理工单系统_精美UI_附教程
开发语言·ui·php·php域名授权·授权系统网站源码
John_ToDebug3 天前
深入解析 Chrome UI 布局配置的设计思想与实现机制
chrome·ui
代码小念3 天前
Pytest+selenium UI自动化测试实战实例(超详细)
selenium·ui·pytest
Aczone283 天前
Linux Framebuffer(帧缓冲)与基本 UI 绘制技术
linux·运维·ui
卖寂寞的小男孩4 天前
Spark执行计划与UI分析
ui·ajax·spark
★YUI★5 天前
学习游制作记录(背包UI以及各种物品的存储)8.12
学习·游戏·ui·unity·c#
梓贤Vigo5 天前
【Axure高保真原型】地图路线和定位
交互·产品经理·axure·原型