整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
頭條創(chuàng)作挑戰(zhàn)賽#
【今日HTML小知識(shí)-2：設(shè)置顏色透明】在網(wǎng)頁(yè)布局中有時(shí)為了網(wǎng)頁(yè)的整體美觀，可能需要將網(wǎng)頁(yè)中的某些部分設(shè)置為背景顏色透明，那么如何設(shè)置背景顏色透明呢？本篇文章就來(lái)給大家介紹一下設(shè)置背景顏色透明的兩種方法。
background屬性中屬性值比較簡(jiǎn)單，這里就不細(xì)說(shuō)了，opacity屬性參數(shù)的＂不透明度＂是以數(shù)字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，換句話(huà)說(shuō)，數(shù)字越大代表元素越不透明。代碼示例如下：
代碼
示例效果
注意：通過(guò)backgroud和opacity設(shè)置背景顏色透明度，如果背景上面有文字的話(huà)，那么文字也會(huì)變成透明，就像上面的效果一樣。
所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時(shí)，提供透明度特性。
用法：background:rgba(R, G, B, A) ；
代碼實(shí)例如下：
代碼
示例效果
注意：通過(guò)rgba方式設(shè)置背景顏色透明度，可以設(shè)置背景顏色透明而文字不透明。
以上為HTML設(shè)置背景透明色的兩種方法，希望能幫助到正在學(xué)習(xí)HTML的你們噢~~~
新人作者，如有不足地方，希望大家多多交流，隨時(shí)補(bǔ)充噢~~~
天遇到一個(gè)問(wèn)題：div邊框和背景色隨主題色變化，邊框和字體不透明，背景半透明（如下圖所示）
設(shè)計(jì)圖
在網(wǎng)上搜索解決辦法發(fā)現(xiàn)都是說(shuō)使用rgba，但是另外一個(gè)問(wèn)題就來(lái)了，背景和邊框的顏色就沒(méi)辦法改變了，所以只好自己想辦法。突發(fā)奇想使用偽類(lèi)完美解決了問(wèn)題，話(huà)不多說(shuō)，上代碼（此處樣式部分使用了scss，不懂的請(qǐng)自行百度）
<!-- html代碼 -->
<div class="box">
內(nèi)容
</div>
/* scss代碼*/
$primary:#2CD334;
.box {
position: relative;
border: 1px solid $primary;
width:100px;
height: 100px;
border-radius: 12px;
&:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: $primary;
opacity: 0.1;
top: 0;
left: 0;
}
}
實(shí)際效果
背景和框架完成了，內(nèi)容就自己解決啦~
AXURE軟件中，部件樣式可以編輯，但有時(shí)卻無(wú)法滿(mǎn)足所有個(gè)性化原型的需求。例如文本框部件，可以設(shè)置是否隱藏邊框，但即使隱藏邊框之后，文本框還會(huì)有白色的背景。
當(dāng)界面需要一個(gè)無(wú)背景色的輸入框時(shí)，對(duì)于完美主義者來(lái)說(shuō)，那無(wú)法去除的白色背景就顯得尤其無(wú)法忍受，現(xiàn)在，就讓我們用非常規(guī)手段，去了它。
01
建立“文本框背景透明”頁(yè)面，雙擊頁(yè)面名稱(chēng)，打開(kāi)頁(yè)面編輯頁(yè)
02
“部件”窗口，拖一個(gè)矩形到編輯頁(yè)，設(shè)置填充顏色：藍(lán)色；再拖一個(gè)文本框（單行）放置在矩形的上面。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
