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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

相关推荐
QQ676580081 小时前
基于 PyTorch 的 VGG16 深度学习人脸识别检测系统的实现+ui界面
人工智能·pytorch·python·深度学习·ui·人脸识别
梓贤Vigo5 小时前
【Axure高保真原型】图片列表添加和删除图片
axure
害羞的白菜5 小时前
基于Axure+墨刀设计的电梯管理系统云台ERP的中保真原型图
数据分析·产品经理·axure·项目经理·墨刀
小赖同学啊5 小时前
Axure 与 Cursor 集成实现方案
axure
pop_xiaoli5 小时前
UI学习—cell的复用和自定义cell
学习·ui·ios
产品设计大观12 小时前
拆解实战案例:电商ERP管理系统从需求到原型全流程设计
产品经理·原型模式·erp·墨刀·erp系统·原型设计·电商erp系统
rolt13 小时前
[pdf、epub]300道《软件方法》强化自测题业务建模需求分析共257页(202505更新)
产品经理·架构师·uml
测试老哥1 天前
Pytest+Selenium UI自动化测试实战实例
自动化测试·软件测试·python·selenium·测试工具·ui·pytest
步、步、为营1 天前
.net jwt实现
ui·.net
藏在歌词里1 天前
Axure-元件&流程图
ui·photoshop