今日HTML小知識-2：設置顏色透明

頭條創作挑戰賽#

【今日HTML小知識-2：設置顏色透明】在網頁布局中有時為了網頁的整體美觀，可能需要將網頁中的某些部分設置為背景顏色透明，那么如何設置背景顏色透明呢？本篇文章就來給大家介紹一下設置背景顏色透明的兩種方法。

1、通過backgroud和opacity設置背景顏色透明

background屬性中屬性值比較簡單，這里就不細說了，opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是1.0，換句話說，數字越大代表元素越不透明。代碼示例如下：

代碼

示例效果

注意：通過backgroud和opacity設置背景顏色透明度，如果背景上面有文字的話，那么文字也會變成透明，就像上面的效果一樣。

2、通過rgba方式設置背景顏色透明

所謂RGBA顏色，就是RGB三原色加ALPHA。在給背景添加顏色的同時，提供透明度特性。

用法：background:rgba(R, G, B, A) ；

代碼實例如下：

代碼

示例效果

注意：通過rgba方式設置背景顏色透明度，可以設置背景顏色透明而文字不透明。

以上為HTML設置背景透明色的兩種方法，希望能幫助到正在學習HTML的你們噢~~~

新人作者，如有不足地方，希望大家多多交流，隨時補充噢~~~

天遇到一個問題：div邊框和背景色隨主題色變化，邊框和字體不透明，背景半透明（如下圖所示）

設計圖

在網上搜索解決辦法發現都是說使用rgba，但是另外一個問題就來了，背景和邊框的顏色就沒辦法改變了，所以只好自己想辦法。突發奇想使用偽類完美解決了問題，話不多說，上代碼（此處樣式部分使用了scss，不懂的請自行百度）

<!-- html代碼 -->
<div class="box">
  內容
</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;
      }
}

實際效果

背景和框架完成了，內容就自己解決啦~

AXURE軟件中，部件樣式可以編輯，但有時卻無法滿足所有個性化原型的需求。例如文本框部件，可以設置是否隱藏邊框，但即使隱藏邊框之后，文本框還會有白色的背景。

當界面需要一個無背景色的輸入框時，對于完美主義者來說，那無法去除的白色背景就顯得尤其無法忍受，現在，就讓我們用非常規手段，去了它。

建立“文本框背景透明”頁面，雙擊頁面名稱，打開頁面編輯頁

“部件”窗口，拖一個矩形到編輯頁，設置填充顏色：藍色；再拖一個文本框（單行）放置在矩形的上面。

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

今日HTML小知識-2：設置顏色透明

1、通過backgroud和opacity設置背景顏色透明

2、通過rgba方式設置背景顏色透明

您的項目需求