Axure 教程 | 設(shè)置文本框背景透明
2021-09-24 14:03 作者:陪學(xué)產(chǎn)品經(jīng)理 | 我要投稿
在AXURE軟件中,部件樣式可以編輯,但有時(shí)卻無(wú)法滿足所有個(gè)性化原型的需求。例如文本框部件,可以設(shè)置是否隱藏邊框,但即使隱藏邊框之后,文本框還會(huì)有白色的背景。
當(dāng)界面需要一個(gè)無(wú)背景色的輸入框時(shí),對(duì)于完美主義者來(lái)說(shuō),那無(wú)法去除的白色背景就顯得尤其無(wú)法忍受,現(xiàn)在,就讓我們用非常規(guī)手段,去了它。
01
建立“文本框背景透明”頁(yè)面,雙擊頁(yè)面名稱,打開頁(yè)面編輯頁(yè)
02
“部件”窗口,拖一個(gè)矩形到編輯頁(yè),設(shè)置填充顏色:藍(lán)色;再拖一個(gè)文本框(單行)放置在矩形的上面。
?
03
生成原型(注意是生成,不是預(yù)覽),可以看到文本框(單行)的白色背景遮住了下面的矩形一部分。
?
04
找到原型生成時(shí),保存的文件地址,找到“文本框背景透明”頁(yè)面的樣式文件:styles.css
?
05
打開styles.css文件,找到文本框(單行)部件的CSS樣式,在樣式內(nèi)增加:opacity:0
?
06
保存styles.css文件,在瀏覽器中刷新原型查看效果
?
標(biāo)簽: