半透明與透明效果設計- CSS rgba, hsla 色彩單位(CSS color ...

具有半透明值(alpha 色版) 的css 3 顏色單位 說明： rgba 及hsla 為css level 3 (css 3) 起，新一代表示色彩的單位(color units)，最. 網頁藝術思考-CSS網頁設計藝術 跳到主文 把玩css網頁視覺設計、矜持w3c網頁標準語法(html)、體認友善的無障礙網頁(accessibility)。

靜墨的荒莫～不老師 部落格全站分類：視覺設計 相簿 部落格 留言 名片 Jul28Mon200814:07 半透明與透明效果設計-CSSrgba,hsla色彩單位(CSScolorunits)[2*] 具有半透明值(alpha色版)的css3顏色單位 說明：rgba及hsla為csslevel3(css3)起，新一代表示色彩的單位(colorunits)，最大的進展就是增加了「a」這個可以定義顏色不透明度(opacity)的alpha值；顏色的指定，當然包括了背景色(background)、邊線色(border)、前景色或文字色(color)、以及text-shadow,box-shadow的陰影色、gradient的顏色等，這讓以往網頁設計需要繁瑣過程的半透明效果變得簡單輕鬆多了。

本篇也附帶討論舊式未支援的瀏覽器，可做到類似效果的幾種設計概念。

適合：有html及css語法基礎概念者。

難度： 更新：2011-06-12 支援：firefox,safari,googlechrome,opera10,ie9(至更新時)。

有二種表示方式： rgba(red值,green值,blue值,alpha值) red,green,blue值 可以是0~255的整數值，與一般8位元顏色的十進位值相同，惟這類表示法不接受十六進位值(如ff,8c)；也可以是0%~100%的百分比值。

所以例如，rgb(128,128,128)=rgb(50%,50%,50%)=#808080。

alpha值(alphavalue) 0.0~1.0允許小數一位的數值，0→完全透明，1→完全不透明，0.7→70%不透明。

w3c沒有明確地表示是否允許小數一位以上的數值，不過firefox小數二位的數值也可以呈現，真是令人讚賞。

語法實例： rgba(255,0,0,0.6)→不透明度60%紅色 rgba(0%,0%,100%,0.4)→不透明度40%藍色 hsla(hue值,saturation值,lightness值,alpha值) hue值(色相值) 以整數「角度」值表示，但是不加「°」角度符號。

0或360→紅色，60→黃色，120→綠色，240→藍色，就好像彩虹色繞成一個圓。

如同數學角度，負值或超過360是允許的，不過這樣用好像是有點自找麻煩。

saturation值(飽和度值) 0%~100%的百分比值，0%→灰色調，100%→最大飽和度。

所以0%時，不論hue值是多少，都會以灰階單色呈現。

lightness值(亮度值) 0%~100%的百分比值，0%→最暗(暗黑)，100%→最亮(亮白)，50%→正常亮度。

50%以上漸漸增加白色，50%以下漸漸增加黑色。

alpha值(alphavalue) 0.0~1.0允許小數一位的數值。

語法實例： hsla(0,100%,50%,0.3)→不透明度30%紅色 hsla(120,100%,20%,0.4)→不透明度40%暗綠色 hsla(240,0%,50%,0.6)→不透明度60%中亮灰色 transparent值-完全透明的關鍵字(keyword)值₪ alpha值=1時，完全不透明，實際上就等同沒有半透明alpha值的定義一樣，例如rgba(255,0,0,1)=rgb(255,0,0)=#ff0000。

alpha值=0時，完全透明，像似css2的關鍵字(keyword)值transparent，當然不管是什麼顏色，透明都是看不見的；不過，transparent代表的是透明黑色，即transparent=hsla(0,0%,0%,0)=rgba(0,0,0,0)。

所以，這也就意味前景色(color)特性(property)也接受transparent值了，如color:transparent;或color:rgba(0,0,0,0);，而這在csslevel2是不允許的。

思考-背景半透明效果輕鬆設計：csscolormodulelevel3 顏色單位(colorunits)在css設計裡，主要運用在指定背景色(background)、邊線色(border)、前景色或文字色(color)，而多了可以直接定義顏色不透明度(opacity)的模式，設計背景半透明效果可說是輕而易舉。

半透明背景色(background-color)效果 直接看範例一xhtml

也讓時間等一等

積極很好。

人，肯積極，多半心裡有目標。

… …以下略，實際內容見範例內…

共同基本的css定義 html,body,h1,h2,h3{ margin:0px; padding:0px; } h1{ font-size:100%; font-weight:normal; } p{ margin-top:1em; margin-bottom:1em; } h1,p{ padding:1em1.25em; } .st{ color:white;/*文字白色*/ /*div.st加背景圖片並定義與圖片同尺寸*/ background:url(圖片檔案位址)no-repeatcenter; height:534px; width:800px; overflow:auto;/*內容超過高度時產生捲軸*/ margin:1.2emauto0; text-align:justify; border:1pxsolidrgb(60%,60%,60%); border-right:none; } css定義半透明背景色(background) #st1.inner{ padding:1em4%; } /*標題h1,段落p加半透明背景色*/ #st1h1{ background:rgba(30%,0%,0%,0.6); } #st1p{ background:rgba(0%,10%,20%,0.6); } 實際呈現可參閱[範例一] 多層半透明色重疊效果-背景加上邊線色(border-color) 共同的css定義與範例一相同。

範例二xhtml

也讓時間等一等

積極很好。

人，肯積極，多半心裡有目標。

… …以下略，實際內容見範例內…

css增加定義半透明邊線色(border) #st2.inner{ padding-bottom:0.25em; } /*半透明背景色與例一雷同*/ #st2h1{ background:rgba(40%,0%,0%,0.6); border-top:2emsolid; border-right:260pxsolid; border-bottom:0.5emsolid; border-color:rgba(100%,100%,100%,0.2);/*20%白色*/ }/*三邊加上不同寬度的border*/ #st2p{ background:rgba(0%,10%,20%,0.6); border-top:12pxsolidrgba(100%,100%,100%,0.4); border-right:12pxsolidrgba(55%,55%,65%,0.4); border-bottom:12pxsolidrgba(30%,30%,40%,0.4); border-left:12pxsolidrgba(80%,80%,90%,0.4); }/*四邊加上40%不同顏色的border*/ 實際呈現可參閱[範例二] 需要了解的是，css指定元素的背景色或背景圖片(background)會顯示在borderedge區域以內，也就是說，border色與background色是重疊的，當border顏色定義成半透明時，就會與其後方背景顏色產生混合。

在範例二中，h1加了20%半透明白色border，但實際呈現的是疊合了暗紅的半透明背景色，因而，在最後面的背景圖片被不同的半透明顏色覆蓋，而產生不同的層次感，並且因為寬度不同的border而使設計更具活潑感；而p則在四邊運用不同的顏色與背景色混合，讓背景圖片產生較立體的半透明視覺效果。

這樣的雙層半透明網頁設計效果，只在一個元素(element)上定義樣式(styles)就可輕易完成，沒有csslevel3時根本困難重重。

文字半透明(color)效果 顏色單位(colorunits)當然可以用在csscolor特性(property)，color通常用來指定文字的顏色，所以也就可以讓文字變成半透明了。

共同的css定義與範例一相同。

範例三xhtml

也讓時間等一等

積極很好。

人，肯積極，多半心裡有目標。

… …以下略，實際內容見範例內…

css把標題首字變半透明色(color) #st3h1::first-letter{ /*h1第一個字變粗大且半透明呈現*/ font:900900%"標楷體",simhei,"細明體"; vertical-align:-8%; color:rgba(85%,100%,100%,0.5);/*50%亮藍*/ } /*半透明背景及邊線,與前例雷同*/ #st3h1{ background:rgba(40%,0%,0%,0.4); border-bottom:20pxsolidrgba(50%,20%,30%,0.4); border-left:60pxsolidrgba(50%,20%,30%,0.4); padding:1em1.25em00; } #st3p{ background:rgba(0%,10%,20%,0.6); border-top:12pxsolidrgba(100%,100%,100%,0.4); border-right:12pxsolidrgba(55%,55%,65%,0.4); border-bottom:12pxsolidrgba(30%,30%,40%,0.4); border-left:12pxsolidrgba(80%,80%,90%,0.4); } 實際呈現可參閱[範例三] 當然，半透明文字的顏色也會與背景色疊合成另一個半透明色，再讓最後面的背景圖片穿透上來。

css3hsla讓定義色彩及明暗度更直覺 以色相、飽和度、亮度(Hue,Saturation,Lightness-HSL)指定顏色，也是css3開始有的顏色單位，與色彩模型中的HSB有些類似，或許還有很多人不太習慣，不過許多情況它還挺方便用的。

共同的css定義與範例一相同。

範例四xhtml

也讓時間等一等

積極很好。

人，肯積極，多半心裡有目標。

… …以下略，實際內容見範例內…

css改變半透明色的飽和度及亮度 #st4.inner{ padding:1em4%; } #st4h1{ background:hsla(120,60%,20%,0.6); border-top:1.5emsolidhsla(120,40%,12%,0.3); border-right:80pxsolidhsla(120,40%,50%,0.3); }/*背景及邊線都是綠色調*/ #st4p{ background:hsla(0,70%,30%,0.7); border-right:80pxsolidhsla(0,70%,80%,0.2); }/*背景及邊線都是紅色調*/ 實際呈現可參閱[範例四] 很多時候需要以同一種色調(HueorTone)，呈現出不同明暗度的感覺，讓視覺上更有層次及立體感，範例中使用hsla定義顏色會是個好方法。

眼尖的人應該已經看出，h1或是p中指定的色相值(Hue)都是一樣的，也就是說用了同一種色調，而只是單純地在背景色(background)或是border定義不同的亮度值(Lightness)，就可以產生更有深度的視覺效果；而如果希望降低或增加顏色的鮮艷度，如範例中只需要指定較低或較高的飽和度值(Saturation)就可以了，h1就只是稍微改變了飽和度。

使用hsl定義顏色，確實可以讓我們省卻不斷地挑選rgb顏色的麻煩，因為只要決定一個顏色，剩下就由亮度或飽和度來調整就可以了。

未支援rgba,hsla的瀏覽器也想半透明效果 未支援具有半透明alpha值色彩單位(colorunits)的瀏覽器，如果使用rgba,hsla指定色彩，只會略過該項定義，但不會因此而影響樣式表(stylesheets)裡其它的定義。

因此，我們可以另外替未支援的瀏覽器定義一組色彩，以範例一背景定義為例： css增加定義給未支援瀏覽器 #st1h1{ background:rgb(30%,0%,0%);/*未支援瀏覽器指定不透明色*/ background:rgba(30%,0%,0%,0.6); } #st1p{ background:rgb(0%,10%,20%);/*未支援瀏覽器指定不透明色*/ background:rgba(0%,10%,20%,0.6); } 未支援的瀏覽器只會執行第一項不透明顏色的定義，第二項會略過不產生任何影響；對於有支援半透明色彩的瀏覽器，雖然兩項定義都有效，但當然是以最後一項為執行的依據；所以，注意兩項順序顛倒就不會有半透明效果囉。

這種作法，至少未支援的瀏覽器不至於結果差距太多。

以png格式半透明圖片作為背景 未支援的瀏覽器如果也想要有類似前述半透明效果的背景顏色，只要先製作一個很小的png格式的半透明圖片，例如10×10px不透明度(opacity)70%的黑色圖片[圖例下載→]，然後定義成背景圖片(background-image)。

以範例一的p為例： css改成定義背景為半透明png圖片 #st1p{ background:url(bg_bk70.png);/*未支援瀏覽器指定半透明背景圖片*/ background:rgba(0,0,0,0.7);/*70%黑色*/ } 第一項除了ie6沒辦法「正確」呈現外，其實較新型瀏覽器(包括ie7)都會有半透明黑色背景，唯一有點不方便的是，如果定義不同顏色的半透明背景，每次都必須製作不同的半透明png圖片。

實際上，只需要第一項就可以在各家瀏覽器達到半透明背景的效果了。

加上第二項將會更好，因為也可以讓有支援alpha值的瀏覽器直接運用更便利的css半透明顏色定義方式，對未來更有幫助，第二項的定義會將背景圖片(background-image)變成預設值none(無)。

css3的opacity不透明度特性，像這樣opacity:0.7;，如果想要運用在此處，其實不是很恰當，因為opacity的定義會使整個元素(element)都變成半透明，包括內容裡的文字，如此可能影響閱讀，目前卻有很多人使用這種方法，有點匪夷所思，有興趣可以參閱久久前的某一個討論，裡面也有提到麻煩的opacity處理方式及以下將會提到的iefilter中的alphaopacity。

filter中的alpha(opacity)不透明度指定給ie6 ie6就需要用到ie專用(ieonly)的cssfilter語法中alpha的不透明度opacity，不過這個方法也是整個元素(element)都會半透明呈現，而且元素必須指定hasLayoutproperty；也由於是特定給ie6的設計，所以最好運用csshacks技巧： css接著前例，定義半透明給ie6 *html#st1p{ background:rgb(0,0,0);/*背景黑色，也讓先前指定的背景圖片回復沒有*/ zoom:1;/*hasLayout*/ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);/*70%不透明度*/ } 這是ie專用(ieonly)語法，所以其實ie7也可以用。

麻煩的問題是裡面文字內容也半透明了，雖然有一奇特方法，css定義其內層元素(element)為position:relative;就可讓裡面內容回復成不透明。

但是像範例中的p，內層沒有可定義的元素(element)也就沒輒了，其實部落格設計也會遇到沒辦法自己增加元素的問題。

另外，像範例中有捲軸產生捲動內容，但是在ie如果內層定義成position:relative;，該元素(element)就像是「固定」在原位，不會隨捲軸捲動了。

所以，指定ie這個特性時，只能多注意一點囉。

ie6也使用半透明png圖片作背景 另一種ie專用(ieonly)的cssfilter語法中AlphaImageLoader，可以讓ie6「較正確」呈現半透明png圖片，不過圖片會「插在」背景(background)及內容(content)之間，所以如果原先有指定背景，會變成像似兩個重疊的背景： css改成「插入」半透明png圖片當背景 *html#st1p{ background:none;/*先前指定的背景圖片改回沒有*/ zoom:1;/*hasLayout*/ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="bg_bk70.png",sizingMethod="scale"); /*插入圖片並縮放至與元素同尺寸*/ } 圖片會由所在元素的borderbox左上角開始插入。

語法中filter內的src="bg_bk70.png"(綠字)，明顯地，雙引號內就是指出圖片檔的位址。

而sizingMethod="scale"可以有三種選擇： sizingMethod="image"：不論所在元素的Box大小，圖片一律以圖片本身尺寸完整顯示。

如果Box尺寸大於圖片，Box超過圖片的區域會被「裁掉」不顯示；如果Box尺寸小於圖片，Box會保持尺寸，不會增大，而圖片則會「突出」Box範圍。

這個定義是預設值，所以沒有sizingMethod這段時，仍會套用此定義。

sizingMethod="scale"：圖片會自動依據元素的borderbox尺寸縮放，所以圖片呈現可能會寬高不等比例變形。

sizingMethod="crop"：圖片會保持圖片本身尺寸，但是圖片超出Box範圍的部分，不會顯示，類似css定義背景圖片的呈現方式。

看起來似乎達到想要的半透明背景效果，也不會讓內容文字也變半透明。

這樣的作法只是為了讓原本不能正確呈現的ie也能有我們想要的效果，嚴格說起來應算是ie的旁門左道，並非w3c標準規範。

怪的是ie仍有不可預期的問題，使用時要先有心理準備就是了，像是內容如果包括需要滑鼠感應的元素(如按鈕、輸入項之類)，會變成無法執行，又得以css指定這類元素position:relative;才會作用。

參考資源 CSS3ColorUnits-w3c官方文件(英文)。

散佈、展示請參閱CreativeCommons授權條文，禁止重混，引述請增加原文連結。

文章標籤 css 半透明 rgba hsla background 背景 color 顏色 alpha opacity 全站熱搜 創作者介紹 不老師 網頁藝術思考-CSS網頁設計藝術 不老師發表在痞客邦留言(8)人氣() E-mail轉寄 全站分類：視覺設計個人分類：CSS單位(units),值(value)此分類下一篇：CSSGradient漸層視覺設計範例[5*] 上一篇：BoxModel-CSS框框模型[2*] 下一篇：CSS設計-樹狀選單,資料夾選單(treemenu/foldermenu)[5*] ▲top 留言列表 發表留言 本站搜尋 出爐文章 文章分類 CSSselectors語法(CSS教學)(3) AttributeSelectors(1)pseudo-classes擬類別(0)pseudo-elements擬元素(1) CSSproperty語法(CSS教學)(3) CSSposition定位(0)background,border(1)transform,animation,transition(1) CSS語法與一般規則(CSS教學)(2) CSS單位(units),值(value)(2)CSSbox,block,inline(1) CSS設計研討(3) CSShacks(1)IEbugs&IEonly(1)CSS網頁設計魔法(3) (x)HTML語法(教學)(2) Attributes屬性(1)IEOnly(1) jQueryPlugin(1) 輪播廣告(1) 無障礙網頁及親和力研討(2) 替代內容(0)表格table無障礙化(0) 文章清單 文章清單 2014十二月(1) 2013十一月(1) 2013六月(1) 2013五月(1) 2013四月(1) 2011七月(1) 2011六月(1) 2011一月(1) 2008十月(1) 2008七月(1) 2008五月(1) 2008二月(1) 2008一月(1) 2007十二月(1) 2007九月(1) 所有文章列表 文章迴響 訂閱RSS 增益網站 學習資源 google論壇cssanimationartCSS,HTML,jQuery,js等研討區@facebookCSSPositioning 文學創作 monica(此站範例中插文的貢獻者) 部落格點閱率 本日人氣： 累積人氣： 站內文章©不老師。

散佈、展示請參閱CreativeCommons姓名標示-非商業性-禁止改作授權條款，禁止重混，引述請增加原文連結。

回到頁首 回到主文 免費註冊 客服中心 痞客邦首頁 ©2003-2022PIXNET 關閉視窗