CSS RGBA的用法程式碼例項

admin發表於2017-03-01
CSS
之前設定元素的透明度都是要使用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瀏覽器中不相容，但是在不久的未來將會有很大的用處，更多內容參閱CSS3 RGBA一章節。 

相關文章