CSS3中使用RGBa來調整透明度的範例說明
這篇文章主要介紹了CSS3中使用RGBa來調節透明度的教程,RGBA是RGB色彩模型的一個擴展,這個縮寫詞代表紅綠藍三原色的首字母,Alpha值代表顏色的透明度或者說不透明度,需要的朋友可以參考下
在CSS3 中，增加了一個opacity 屬性，允許開發者設置元素的透明度，現在opacity 已被主流的現代瀏覽器支持，但opacity 會把被設定的元素及其子元素同時設定為同一個透明度，這樣的透明規則相當不靈活，在實際開發中往往也是會遇到很多麻煩。其實，在 CSS3 中還有另一個顏色透明解決方案 —— RGBa 。相對於 opacity ，RGBa 可以在單一元素上設定透明度，而不影響其子元素，只是 RGBa 的瀏覽器支援度並沒有 opacity 的廣泛，因此相對較少引起開發者註意。
RGBA(R,G,B,A)
取值：
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數 | 百分數
A：Alpha透明度。取值0~1之間。
下面是用rgba() 設定50%透明度的白色.
p {
color: rgba(255, 255, 255, 0.5);
}RGBA是RGB色彩模型的一個擴充。這個縮寫代表紅綠藍三原色的首字母，Alpha值代表顏色的透明度/不透明度。
下面開始詳細介紹 RGBa 顏色。
一. RGBa 顏色基礎
RGBa 在本質上看也是為設置的元素增加了一個alpha 通道，即在紅色、綠色、藍色三種顏色通道之外增加一個代表透明度的通道，其中RGB 值使用我們熟悉的3個0 到255 的整數分別表示紅色、綠色、藍色，而alpha 取值則為0 到1 （小數位一位）。以下例舉一個例子說明其具體的使用方式：
在CSS 2.1 中，支援使用RGB 色彩聲明（儘管開發者可能更習慣使用如：#343434 的16 進位表示方式），例如要為id 為example的p 元素設定背景色#343434 ，可以這樣寫
/* RGB 表示方式 */
#example {background: rgb(52, 52, 52); }接下來再使用RGBa ，把例子中的背景顏色修改成帶有0.5 透明度。
/* 设置 0.5 透明度 */
#example-a {background: rgba(52, 52, 52, 0.5); }
/* 也可以省略小数点前的 0 */
#example-a {background: rgba(52, 52, 52, .5); }增加透明度前後效果如下（為了更明顯的反映透明度帶來的效果，例子中的body 增加了背景紋理）：
可以看出，RGBa 只是在原有的RGB 的基礎上增加一個參數，這個改動雖小，卻為開發者提供了很大的方便。
另外，RGBa 除了可以用在 background 屬性外，還可以用在 color 和 border 屬性（註：border 屬性使用 RGBa 在 Firefox 中會與其他瀏覽器中的效果略有不同）。
二. 瀏覽器支援與漸進增強
儘管RGBa 已經在主流現代瀏覽器中獲得了良好的支持，其中Webkit 對RGBa 的支持是最早的，Chrome 至少在0.415 版本便開始支持BaRGBaRG ，在這個方面Chrome 可以說是非常給力的，另外Gecko 和Presto 內核也逐步實現了對RGBa 的支持，IE 瀏覽器則從IE9 開始才支援RGBa 。更具體的瀏覽器支援情況如下：
Chrome 0.4.154.33+ , Firefox 3.0+ , Safari 3.2.1+ , Opera 10.10+ , IE9+
更詳細的瀏覽器支援情況請參考這裡。
對於不支援 RGBa 的瀏覽器，這裡可以採用漸進式增強的方案解決，Kayo 推薦的是指定一個保留色的解決方案。首先，開發者必須知道，不支援 RGBa 的瀏覽器會把使用了 RGBa 的 CSS 屬性值視為語法錯誤，因此不理會該 CSS 屬性設定。因此，開發者可以在設定 RGBa 顏色之前先設定一個不使用透明度的屬性，避免瀏覽器不支援 RGBa 時出現完全沒有顏色的情況。以下對上例進行擴充說明：
#example1 {background: rgb(52, 52, 52); background: rgba(52, 52, 52, .5); }
不支援RGBa 的瀏覽器會忽略第二個background 屬性設置，按照第一個屬性值設定元素的背景色，這樣雖然不能使瀏覽器之間的效果相同，但已經達到相似的效果了，並且體現了一種不錯的漸進增強解決方案。
當然，對於IE ，可以使用濾鏡達到與支援RGBa 瀏覽器中相同的效果，例如：針對以上例子，你可以如下地編寫程式碼
<style type="text/css">
#example-a {background: rgba(52, 52, 52, .5); }
</style>
<!--[if IE]>
<style type="text/css">
#example-a {
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#34343432', endColorstr='#34343432');
zoom: 1;
}
</style>
<![endif]-->這裡需要注意，濾鏡中使用的是上例中相同的顏色和透明度，只是使用16 進位表示法。
IE 会忽略 RGBa 颜色设置，并且根据 filter 滤镜设置颜色，这样的效果与 RGBa 的效果相同。
三. 不影响子元素
在文章的开头已经介绍过，RGBa 相对 opacity 的优势是不会影响其子元素，即可以单独为被设置的元素设置透明度，而子元素而不受该设置影响。下面再例举一个具体的例子，分别以 RGBa 和 opacity 为元素设置透明度说明两者的区别。
完整代码：
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>RGBa 与 opacity 效果的区别</title>
<style type="text/css">
body {padding-top: 200px; background: url(bg.png); }
#example, #example-a {width: 200px; height: 100px; margin: 0 auto; }
#example {background: rgb(52, 52, 52); opacity: 0.5; }
#example-a {margin-top: 20px; background: rgba(52, 52, 52, .5); }
.inside {display: block; width: 50px; height: 50px; margin-left: 10px; background: rgb(100, 140, 180); }
</style>
</head>
<body>
<p id="example">
<span class="inside"></span>
</p>
<p id="example-a">
<span class="inside"></span>
</p>
</body>
</html>具体效果
可以看出，opacity 会使其中的子元素 span 同时变为半透明的效果，而 RGBa 则只改变被设置的元素的透明度，而在大多数情况下，开发者只需要设置当前元素的透明度（如遮罩，半透明背景等），因此使用 RGBa 会更加的灵活。
另外，在 IE9 中，直接使用 RGBa 颜色与使用 opacity 设置透明的效果会有差异（读者可以在 IE9 下浏览 Demo 查看具体的效果），开发者需要注意这一点差异。
相关文章：
以上是CSS3中使用RGBa來調整透明度的範例說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
純CSS3怎麼實現波浪效果？ （程式碼範例）
Jun 28, 2022 pm 01:39 PM
純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！
css怎麼隱藏元素但不佔空間
Jun 01, 2022 pm 07:15 PM
兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。
css3怎麼實現花邊邊框
Sep 16, 2022 pm 07:11 PM
在css中，可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框，即給邊框加上背景圖片，只需要將背景圖片指定為花邊樣式即可；語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。
原來利用純CSS也能實現文字輪播與圖片輪播！
Jun 10, 2022 pm 01:00 PM
怎麼製作文字輪播與圖片輪播？大家第一想到的是利用js，其實利用純CSS也能實現文字輪播與圖片輪播，下面來看看實作方法，希望對大家有幫助！
css3如何實現滑鼠點擊圖片放大
Apr 25, 2022 pm 04:52 PM
實作方法：1、使用「:active」選擇器選取滑鼠點擊圖片的狀態；2、使用transform屬性和scale()函數實現圖片放大效果，語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。
教你win10工作列設定透明度的方法
Jul 10, 2023 pm 12:37 PM
win10系統有許多比較新穎的功能，有小夥伴想要讓自己的win10系統更有個人化，因此想設定工作列透明度看起來更酷炫。那麼win10工作列如何設定透明度呢？下面小編就教大家win10工作列設定透明度的方法。具體的方法如下：1、開啟電腦，滑鼠移動到任務欄，然後滑鼠右鍵任務欄，在視窗找到「任務欄設定」並且點開。 2.點開「工作列設定」視窗後，找到「顏色」選項，點開，在「顏色」設定介面可以設定大家所喜歡的得任務列顏色，大家可以選擇Windows顏色也可以自訂顏色，選好顏色後找到下面的「透明效
css3怎麼設定動畫旋轉速度
Apr 28, 2022 pm 04:32 PM
在css3中，可以利用「animation-timing-function」屬性來設定動畫旋轉速度，該屬性用於指定動畫將如何完成一個週期，設定動畫的速度曲線，語法為「元素{animation-timing-function:速度屬性值;}」。
