css3中rgba指的是什么

這篇“css3中rgba指的是什么”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“css3中rgba指的是什么”文章吧。

創(chuàng)新互聯(lián)建站專注網(wǎng)站設(shè)計,以設(shè)計驅(qū)動企業(yè)價值的持續(xù)增長,網(wǎng)站，看似簡單卻每一個企業(yè)都需要——設(shè)計，看似簡潔卻是每一位設(shè)計師的心血 十多年來，我們只專注做網(wǎng)站。認真對待每一個客戶，我們不用口頭的語言來吹擂我們的優(yōu)秀，上千家的成功案例見證著我們的成長。

rgba是css3中一種定義顏色的函數(shù)，語法為“rgba(R,G,B,A)”，代表由紅（R）、綠（G）、藍（B）和透明度（A）的變化以及相互疊加來得到各式各樣的顏色；參數(shù)R、G、B的取值范圍為“0~255”，A的取值范圍為“0~1”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

RGB是一種色彩標準，是由紅(R)、綠(G)、藍(B)的變化以及相互疊加來得到各式各樣的顏色。RGBA是在RGB的基礎(chǔ)上增加了控制alpha透明度的參數(shù)。

語法：

rgba(R,G,B,A)

參數(shù)：

R：紅色值。正整數(shù) | 百分數(shù)

G：綠色值。正整數(shù) | 百分數(shù)

B：藍色值。正整數(shù)| 百分數(shù)

A：透明度。取值0~1之間

取值區(qū)間：

<length> ：Hue(色調(diào))。 0(或360)表示紅色，120表示綠色，240表示藍色，當然可取其他數(shù)值來確定其它顏色；

<percentage> ：Saturation(飽和度)。 取值為0%到100%之間的值；

<percentage> ：Lightness(亮度)。 取值為0%到100%之間的值；

<opacity> ：alpha(透明度)。 取值在0到1之間；

簡單說明：

RGB 色彩模式（也翻譯為“紅綠藍”，比較少用）是工業(yè)界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統(tǒng)之一。

RGBA 在 RGB 的基礎(chǔ)上多了控制 Alpha 透明度的參數(shù)。以上R、G、B三個參數(shù)，正整數(shù)值的取值范圍為：0 - 255。百分數(shù)值的取值范圍為：0.0% - 100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分數(shù)值。A參數(shù)，取值在0~1之間，不可為負值。

瀏覽器的兼容性：

如果龐統(tǒng)說 RGBA 是制作透明色（透明背景色、透明邊框色、透明前景色等），大家不由會想起 opacity 這個東西。他在我們 CSS2 中制作背景色通常用到，可是要用他來制作邊框色或都說前景色的話，那他就只能在邊上站著了，有心無力呀。

現(xiàn)在我們先來看一個 RGBA 和 Opacity 的對比實例，HTML 代碼：

<div class="example-opacity">
  <p>Opacity效果</p>
  <ul>
   <li class="opacity opacity1">100%</li>
   <li class="opacity opacity2">80%</li>
   <li class="opacity opacity3">60%</li>
   <li class="opacity opacity4">40%</li>
   <li class="opacity opacity5">20%</li>
   <li class="opacity opacity6">0</li>
  </ul>
  <p>CSS3的RGBA效果</p>
  <ul>
   <li class="rgba rgba1">1</li>
   <li class="rgba rgba2">0.8</li>
   <li class="rgba rgba3">0.6</li>
   <li class="rgba rgba4">0.4</li>
   <li class="rgba rgba5">0.2</li>
   <li class="rgba rgba6">0</li>
 </ul>
</div>

我們分別給這兩上 ul 中的 li 應(yīng)用相關(guān)樣式， 在 li.opacity 中我用使用 CSS2 中的 Opacity 而在 li.rgba 中我們使用 CSS3 的 RGBA新屬性。

Opacity樣式

li.opacity{
  float: left;
  width: 50px;
  height: 50px;
}
li.opacity1 {
   background: rgb(255,255,0);
   opacity: 1;
   filter:alpha(opaity=100);
}
li.opacity2 {
  background: rgb(255,255,0);
  opacity: 0.8;
  filter:alpha(opaity=80);
}
li.opacity3 {
  background: rgb(255,255,0);
  opacity: 0.6;
  filter:alpha(opaity=60);
}
li.opacity4 {
  background: rgb(255,255,0);
  opacity: 0.4;
  filter:alpha(opaity=40);
}
li.opacity5 {
  background: rgb(255,255,0);
  opacity: 0.2;
  filter:alpha(opaity=20);
}
li.opacity6 {
  background: rgb(255,255,0);
  opacity: 0;
  filter:alpha(opaity=0);
}

RGBA樣：

li.rgba {
  float: left;
  width: 50px;
  height: 50px;
}
li.rgba1 {
  background: rgba(255,255,0,1);
}
li.rgba2 {
  background: rgba(255,255,0,0.8);
}
li.rgba3 {
  background: rgba(255,255,0,0.6);
}
li.rgba4 {
  background: rgba(255,255,0,0.4);
}
li.rgba5 {
  background: rgba(255,255,0,0.2);
}
li.rgba6 {
  background: rgba(255,255,0,0);
}

我們來看看其效果：

效果中我們可以看出，他們相同之處就是背景色完全是一樣的，但區(qū)別就是一直讓大家覺得頭痛的問題，那就是 Opacity 后代元素會隨著一起具有透明性，所以我們 Opacity 中的字隨著透明值下降越來越看不清楚，而 RGBA 不具有這樣的問題。

以上就是關(guān)于“css3中rgba指的是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：css3中rgba指的是什么
轉(zhuǎn)載源于：http://muchs.cn/article48/ihehep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站改版、網(wǎng)站收錄、小程序開發(fā)、定制開發(fā)、營銷型網(wǎng)站建設(shè)

廣告

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