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

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

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

01

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

02

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

03

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

04

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

05

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

06

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

相关推荐
共享ui设计和前端开发人才2 小时前
UI前端大数据处理安全性保障:数据加密与隐私保护策略
ui
ui设计前端开发老司机2 小时前
UI前端大数据处理性能瓶颈突破:分布式计算框架的应用
ui
前端开发与ui设计的老司机2 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
reddingtons4 小时前
Adobe高阶技巧与设计师创意思维的进阶指南
人工智能·adobe·illustrator·设计师·photoshop·创意设计·aftereffects
梓贤Vigo5 小时前
【Axure高保真原型】动态打字输入效果
交互·产品经理·axure·原型
UI设计和前端开发从业者6 小时前
从UI设计到数字孪生实战应用:构建智慧金融的智能风控平台
ui·金融
梓贤Vigo8 小时前
【Axure视频教程】大小图轮播
交互·产品经理·axure·原型·中继器
ui设计前端开发老司机14 小时前
数字孪生技术为UI前端提供全面支持:实现产品的可视化配置与定制
ui
X_StarX15 小时前
【Unity笔记01】基于单例模式的简单UI框架
笔记·ui·unity·单例模式·游戏引擎·游戏开发·大学生
Clair-Sean1 天前
【交互设计】UI 与 UX 简介:从核心概念到行业实践
ui·ux