css設(shè)置背景顏色透明度的方法

通常情況下css設(shè)置背景顏色透明度只需要使用rgba(R,G,B,A)即可。以上R、G、B三個(gè)參數(shù)，正整數(shù)值的取值范圍為：0 - 255。A為透明度參數(shù)，取值在0~1之間，不可為負(fù)值。 

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比南山網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式南山網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋南山地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

現(xiàn)在介紹css中設(shè)置背景顏色透明另一種方法，通過backgroud和opacity設(shè)置。

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

1、通過backgroud和opacity設(shè)置背景顏色透明

background屬性中屬性值比較簡(jiǎn)單，這里就不細(xì)說了，大家可以參考css學(xué)習(xí)手冊(cè)來了解一下，我們?cè)谶@里來簡(jiǎn)單看看opacity屬性

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

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

代碼如下：

<div class="box"></div>

.box{
  width:300px; 
  height:200px; 
  margin:0 auto; 
  border:1px solid #ccc; 
  background:red; 
  opacity:0.2;  
}

背景顏色透明效果如下：

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

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

2、通過rgba方式設(shè)置背景顏色透明

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

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

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

<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方式設(shè)置背景顏色透明度效果如下：

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

以上就是css如何設(shè)置背景顏色透明？css設(shè)置背景顏色透明度的兩種方法介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

當(dāng)前文章：css設(shè)置背景顏色透明度的方法
分享路徑：http://muchs.cn/article6/jchoog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、定制網(wǎng)站、ChatGPT、網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)