CSS3 RGBA顏色類型不等于RGB與opacity相加

2020-03-24 19:23:30

字體：大中小

來源：轉載

供稿：網友

這里我們學習CSS3 RGBA顏色類型，使用它不等于RGB與opacity相加。想想不使用CSS3，我們是如何滿足“背景透明，文字（內容）不透明”這種需求的？例如現在有個需求：有個長300px，高100px的div在body為紅色的頁面中；該div擁有不透明度為50%的黑色背景顏色；該div內容不允許出現半透明效果，且文字為白色。根據該需求中的3點要求，我們需要得出的效果應如下圖：
Figure 1: 背景透明內容不透明根據需求里的已知條件，我們代碼如下：body{
background:#f00;
}
#opacity{
width:400px;
height:100px;
background-color:#000;
color:#fff;
filter:alpha(opacity=50); /* For IE */
opacity:.5;
}

div id="opacity" 怎樣實現背景透明，內容不透明？ /div 運行這段代碼后，效果與需求3不符合，內容也隨著容器成了半透明的，看其效果如下圖：
Figure 2: 內容也半透明了有經驗的前端工程師知道，要達到需求所述的效果，上面的代碼需要做些許變動：如果僅需滿足IE，那么在原有的結構上加多一層，并將其設置為position:relative。效果如下： 2.兼容大部分瀏覽器的處理方式：這也需要加多一層，不過要與原結構“同級”。效果如下：以上2中方式，其中only ie的自然是不可取的，因為這是前端工程師的職責所在，我們必須使得大部分用戶能得到相同的體驗，而不僅僅是某個范圍至于第二種，這是現在比較流行的處理方式。不過這種方式也不是那么完美，這個缺憾表現在：代碼量增加：需加多額外一層無意義標簽；與此同時，相應的CSS代碼也將增加不靈活：由于新增的一層與內容層是并級的，所以新增層的寬高不能動態的隨著內容層的中內容的增減而變化。這個時候CSS3 RGBA的優勢就體現出來了，從字面看，RGBA = RGB + alpha。但事實上RGBA并不是簡單的RGB與alpha的相加。請看例子CSS3 RGBA color詳解中幾種顏色類型的對比。我們知道opacity（IE下用filter:alpha(opacity=??)）是讓整個元素渲染成半透明的效果，而不能單獨指定是否只有顏色為半透明。我想這也許正是RGBA和HSLA這種類型顏色的出現原因。 RGBA的語法非常簡單，如果你熟悉RGB顏色話。 rgba(0-255,0-255,0-255,0-1) 這就是RGBA的語法，前三個參數為色調，取值可在0-255之間，第四個參數則為alpha，取值為0-1之間。以上面的需求第2點為例，用RGBA可以這樣表示background-color:rgba(0,0,0,.5); 這樣就只有背景色為半透明，其它的俱不受影響。最大的問題被輕松搞定，那整個需求即變得異常簡單起來，遲疑什么？立即看看用CSS3 RGBA實現的背景透明內容不透明效果吧。而之前在第二種實現方案中所提及的2個缺憾，在RGBA的實現方案中，似乎根本不存在。現在相信你也能體會到RGBA這種顏色類型的強大力量。CSS3離你還遠嗎html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：一款利用html5和css3動畫排列人物頭像的實例演示

下一篇：CSS中清除浮動方法