CSS RGBA 程式碼例項

admin發表於2017-03-01
CSS

之前設定元素透明度大多使用 opacity 屬性，但此屬性有個比較大的問題。

子元素會繼承 opacity 屬性，比如設定 div 半透明，那麼此 div 文字也會出現半透明效果。

這往往不是我們想要的，通過 RGBA方式可以避免此現象。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
div{ 
  width:150px; 
  height:50px;
  text-align:center;
  line-height:50px;
  background:rgba(100,40,40,0.3); 
} 
</style> 
</head> 
<body> 
<div>螞蟻部落歡迎您</div> 
</body> 
</html>

以上程式碼可以設定 div 元素的透明度，但是並不會使其中的文字出現透明現象。

RGBA 在低版本的IE瀏覽器中不相容，更多內容參閱CSS RGBA一章節。 

相關文章