跟大家講解下有關css如何設置背景顏色透明？css設置背景顏色透明度的兩種方法介紹，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說css如何設置背景顏色透明？css設置背景顏色透明度的兩種方法介紹，小編也收集到了有關css如何設置背景顏色透明？css設置背景顏色透明度的兩種方法介紹的相關資料，希望大家看到了會喜歡。

在網頁布局中有時為了網頁的整體美觀，可能需要將網頁中的某些部分設置為背景顏色透明，那么如何設置背景顏色透明呢？本篇文章就來給大家介紹一下css設置背景顏色透明的方法。

在css中設置背景顏色透明的方法有兩種：一種是通過rgba方式設置，另一種是通過backgroud和opacity設置。

下面我們就來分別看看css中這兩種方法實現背景顏色透明的具體實例

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

background屬性中屬性值比較簡單，這里就不細說了，大家可以參考css學習手冊來了解一下，我們在這里來簡單看看opacity屬性

opacity屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，換句話說，數字越大代表元素越不透明。參數除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。

看完了對于兩種屬性的介紹，下面我們就來看通過backgroud和opacity設置背景顏色透明度的具體實例

代碼如下：

<div class="box"></div>.box{ width:300px; height:200px; margin:0 auto; border:1px solid #ccc; background:red; opacity:0.2; }

背景顏色透明效果如下：

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

所以要看情況來使用這種方法來設置背景顏色透明。

相關文章推薦： 1. 網頁設計中css怎么實現背景透明?(示例)2.css實現背景顏色半透明的兩種方法3.css如何設置透明度？設置透明度的兩種方法（代碼實例） 相關視頻教程：1.CSS視頻教程-玉女心經版

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

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

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

下面我們就來看通過rgba方式設置背景顏色透明度的具體實例：

<div class="title_div">背景顏色透明</div>.title_div{ width: 200px; height: 200px; line-height: 30px; text-align: center; margin:0 auto; background-color:rgba(220,38,38,0.2);}

rgba方式設置背景顏色透明度效果如下：

說明：通過rgba方式設置背景顏色透明度，可以設置背景顏色透明而文字不透明，但是這種方法的兼容性不好，不兼容ie瀏覽器

本篇文章到這里就全部結束了，關于css中更多的知識大家可以參考php中文網css視頻教程、css3視頻教程、css學習手冊和css3學習手冊進一步的學習。

以上就是css如何設置背景顏色透明？css設置背景顏色透明度的兩種方法介紹的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網