欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3中使用RGBa來(lái)調(diào)節(jié)透明度的教程

Kayo   發(fā)布時(shí)間：2016-05-09 10:56:13   作者：Kayo Lee   我要評(píng)論
這篇文章主要介紹了CSS3中使用RGBa來(lái)調(diào)節(jié)透明度的教程,RGBA是RGB色彩模型的一個(gè)擴(kuò)展,這個(gè)縮寫(xiě)詞代表紅綠藍(lán)三原色的首字母,Alpha值代表顏色的透明度或者說(shuō)不透明度,需要的朋友可以參考下

在 CSS3 中，增加了一個(gè) opacity 屬性，允許開(kāi)發(fā)者設(shè)置元素的透明度，現(xiàn)在 opacity 已被主流的現(xiàn)代瀏覽器支持，但 opacity 會(huì)把被設(shè)置的元素及其子元素同時(shí)設(shè)置為同一個(gè)透明度，這樣的透明規(guī)則相當(dāng)不靈活，在實(shí)際開(kāi)發(fā)中往往也是會(huì)遇到很多麻煩。其實(shí)，在 CSS3 中還有另外一套顏色透明解決方案 —— RGBa 。相對(duì)于 opacity ，RGBa 可以在單個(gè)元素上設(shè)置透明度，而不影響其子元素，只是 RGBa 的瀏覽器支持度并沒(méi)有 opacity 的廣泛，因此相對(duì)較少引起開(kāi)發(fā)者注意。

RGBA(R,G,B,A)
取值：
R：紅色值。正整數(shù) | 百分?jǐn)?shù)
G：綠色值。正整數(shù) | 百分?jǐn)?shù)
B：藍(lán)色值。正整數(shù) | 百分?jǐn)?shù)
A：Alpha透明度。取值0~1之間。
下面是用rgba() 設(shè)置50%透明度的白色.

CSS Code復(fù)制內(nèi)容到剪貼板
  1. p {   
  2. color: rgba(255, 255, 255, 0.5);   
  3. }  

RGBA是RGB色彩模型的一個(gè)擴(kuò)展。這個(gè)縮寫(xiě)詞代表紅綠藍(lán)三原色的首字母，Alpha值代表顏色的透明度/不透明度。

下面開(kāi)始詳細(xì)介紹 RGBa 顏色。


一. RGBa 顏色基礎(chǔ)
RGBa 在本質(zhì)上看也是為設(shè)置的元素增加了一個(gè) alpha 通道，即在紅色、綠色、藍(lán)色三種顏色通道之外增加一個(gè)代表透明度的通道，其中 RGB 值使用我們熟悉的用3個(gè) 0 到 255 的整數(shù)分別表示紅色、綠色、藍(lán)色，而 alpha 取值則為 0 到 1 （小數(shù)位一位）。下面例舉一個(gè)例子說(shuō)明其具體的使用方式：

在 CSS 2.1 中，支持使用 RGB 色彩聲明（盡管開(kāi)發(fā)者可能更加習(xí)慣使用如：#343434 的 16 進(jìn)制表示方式），例如要為 id 為 example 的 div 元素設(shè)置背景色 #343434 ，可以這樣寫(xiě)

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* RGB 表示方式 */  
  2. #example {background: rgb(52, 52, 52); }  

接下來(lái)再使用 RGBa ，把例子中的背景顏色修改成帶 0.5 透明度。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* 設(shè)置 0.5 透明度 */  
  2. #example-a {background: rgba(52, 52, 52, 0.5); }   
  3. /* 也可以省略小數(shù)點(diǎn)前的 0 */  
  4. #example-a {background: rgba(52, 52, 52, .5); }  

增加透明度前后效果如下（為了更明顯的反映透明度帶來(lái)的效果，例子中的 body 增加了背景紋理）：
201659105713888.png (285×278)

可以看出，RGBa 只是在原有的 RGB 的基礎(chǔ)上增加一個(gè)參數(shù)，這個(gè)改動(dòng)雖小，卻為開(kāi)發(fā)者提供了很大的方便。

另外，RGBa 除了可以用在 background 屬性外，還可以用在 color 和 border 屬性（注：border 屬性使用 RGBa 在 Firefox 中會(huì)與在其他瀏覽器中的效果略有不同）。

二. 瀏覽器支持與漸進(jìn)增強(qiáng)
盡管 RGBa 已經(jīng)在主流現(xiàn)代瀏覽器中獲得了良好的支持，其中 Webkit 對(duì) RGBa 的支持是最早的，Chrome 至少在 0.415 版本便開(kāi)始支持 RGBa ，在這個(gè)方面 Chrome 可以說(shuō)是非常給力的，另外 Gecko 和 Presto 內(nèi)核也逐步實(shí)現(xiàn)了對(duì) RGBa 的支持，IE 瀏覽器則從 IE9 開(kāi)始才支持 RGBa 。更具體的瀏覽器支持情況如下：

Chrome 0.4.154.33+ , Firefox 3.0+ , Safari 3.2.1+ , Opera 10.10+ , IE9+

更加詳細(xì)的瀏覽器支持情況請(qǐng)參考這里。

對(duì)于不支持 RGBa 的瀏覽器，這里可以采用漸進(jìn)增強(qiáng)的方案解決，Kayo 推薦的是指定一個(gè)保留色的解決方案。首先，開(kāi)發(fā)者必須知道，不支持 RGBa 的瀏覽器會(huì)把使用了 RGBa 的 CSS 屬性值視為語(yǔ)法錯(cuò)誤，因此不理會(huì)該 CSS 屬性設(shè)置。因此，開(kāi)發(fā)者可以在設(shè)置 RGBa 顏色之前首先設(shè)置一個(gè)不使用透明度的屬性，避免當(dāng)瀏覽器不支持 RGBa 時(shí)出現(xiàn)完全沒(méi)有顏色的情況。下面對(duì)上例進(jìn)行擴(kuò)展說(shuō)明：

#example1 {background: rgb(52, 52, 52); background: rgba(52, 52, 52, .5); }
不支持 RGBa 的瀏覽器會(huì)忽略第二個(gè) background 屬性設(shè)置，按照第一個(gè)屬性值設(shè)置元素的背景色，這樣雖然不能使瀏覽器之間的效果相同，但已經(jīng)達(dá)到相似的效果了，并且體現(xiàn)了一種不錯(cuò)的漸進(jìn)增強(qiáng)解決方案。

當(dāng)然，對(duì)于 IE ，可以使用濾鏡達(dá)到與支持 RGBa 瀏覽器中相同的效果，例如：針對(duì)以上例子，你可以如下地編寫(xiě)代碼

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.     #example-a {background: rgba(52, 52, 52, .5); }   
  3. </style>   
  4. <!--[if IE]>   
  5.     <style type="text/css">   
  6.         #example-a {   
  7.             background: transparent;   
  8.             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#34343432', endColorstr='#34343432');   
  9.             zoom: 1;   
  10.         }    
  11.     </style>   
  12. <![endif]-->  

這里需要注意，濾鏡中使用的是上例中相同的顏色和透明度，只是使用 16 進(jìn)制表示。

IE 會(huì)忽略 RGBa 顏色設(shè)置，并且根據(jù) filter 濾鏡設(shè)置顏色，這樣的效果與 RGBa 的效果相同。

三. 不影響子元素
在文章的開(kāi)頭已經(jīng)介紹過(guò)，RGBa 相對(duì) opacity 的優(yōu)勢(shì)是不會(huì)影響其子元素，即可以單獨(dú)為被設(shè)置的元素設(shè)置透明度，而子元素而不受該設(shè)置影響。下面再例舉一個(gè)具體的例子，分別以 RGBa 和 opacity 為元素設(shè)置透明度說(shuō)明兩者的區(qū)別。

完整代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE HTML>   
  2. <html lang="zh-CN">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>RGBa 與 opacity 效果的區(qū)別</title>   
  6.     <style type="text/css">   
  7.         body {padding-top: 200px; background: url(bg.png); }   
  8.         #example, #example-a {width: 200px; height: 100px; margin: 0 auto; }   
  9.         #example {background: rgb(52, 52, 52); opacity: 0.5; }   
  10.         #example-a {margin-top: 20px; background: rgba(52, 52, 52, .5); }   
  11.         .inside {display: block; width: 50px; height: 50px; margin-left: 10px; background: rgb(100, 140, 180); }   
  12.     </style>   
  13. </head>   
  14. <body>   
  15.     <div id="example">   
  16.     
  17.         <span class="inside"></span>   
  18.     
  19.     </div>   
  20.     
  21.     <div id="example-a">   
  22.     
  23.         <span class="inside"></span>   
  24.     
  25.     </div>   
  26. </body>   
  27. </html>  

具體效果
201659105755143.png (275×273)

可以看出，opacity 會(huì)使其中的子元素 span 同時(shí)變?yōu)榘胪该鞯男Ч?，?RGBa 則只改變被設(shè)置的元素的透明度，而在大多數(shù)情況下，開(kāi)發(fā)者只需要設(shè)置當(dāng)前元素的透明度（如遮罩，半透明背景等），因此使用 RGBa 會(huì)更加的靈活。

另外，在 IE9 中，直接使用 RGBa 顏色與使用 opacity 設(shè)置透明的效果會(huì)有差異（讀者可以在 IE9 下瀏覽 Demo 查看具體的效果），開(kāi)發(fā)者需要注意這一點(diǎn)差異。

相關(guān)文章

  • CSS3顏色值RGBA與漸變色使用介紹

    CSS3之前漸變色圖片只能用背景圖片，CSS3的漸變色語(yǔ)法可以讓我們省去下載圖片的開(kāi)銷(xiāo)，并且在改變?yōu)g覽器分辨率時(shí)有更好的效果，這里就為大家介紹一下,需要的朋友可以參考下
    2020-03-06

  • CSS3解決移動(dòng)頁(yè)面上點(diǎn)擊鏈接觸發(fā)色塊的問(wèn)題

    移動(dòng)瀏覽器中頁(yè)面點(diǎn)擊某個(gè)元素時(shí)會(huì)出現(xiàn)閃動(dòng)的色塊,也算是比較常見(jiàn)的問(wèn)題了,這里我們就來(lái)講通過(guò)-webkit-tap-highlight-color:rgba(0,0,0,0)屬性來(lái)用CSS3解決移動(dòng)頁(yè)面上點(diǎn)擊
    2016-06-03

  • CSS3中使用RGBA設(shè)置透明度的示例

    這篇文章主要介紹了CSS3中使用RGBA設(shè)置透明度的示例,即在傳統(tǒng)的RGB值上增添調(diào)節(jié)透明度的Alpha值,需要的朋友可以參考下
    2015-08-04

  • CSS3 透明色 RGBA使用介紹

    我們今天需要討論的RGBA。如果需要更詳細(xì)的解說(shuō)，大家就跟著我一起往下看吧
    2013-08-06

  • CSS3 rgb and rgba（透明色）的使用詳解

    這篇文章主要介紹了CSS3 rgb and rgba（透明色）的使用詳解，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-09-25

最新評(píng)論