CSS 透明度

admin發表於2018-09-09
CSS

預設情況，元素是全透明的，文字是不透明的。

但是在實際應用中，進行一些透明度的設定，比如圖片半透明背景的文字說明。

閱讀本文後可以參閱CSS圖片上面新增文字說明一文加強理解。

本文將結合程式碼例項介紹一下CSS有哪幾種方式可以實現設定透明度的功能。

特別說明：考慮到軟硬體的進步，本文不考慮IE8和IE8以下瀏覽器相容性問題。

一.opacity屬性設定：

利用此屬性可以非常輕鬆的實現透明度設定效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width:150px;
  line-height:100px;
  background-color:blue;
  opacity:0.5;
  text-align:center;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

上面程式碼可以設定div元素為半透明，同時div中的文字也被設定為半透明。

opacity屬性專業用來設定透明度，值介於0-1之間，0表示完全透明，1表示完全不透明。

實際應用中，往往不希望影響文字的透明度，否則影響閱讀，下面做一下介紹。

二.RGBA設定透明度：

此屬性在設定背景顏色的同時，一併設定透明度。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width:150px;
  line-height:100px;
  text-align:center;
  background-color:rgba(125,255,158,0.5);
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

上述程式碼設定div為半透明，它裡面的文字透明度並未受到任何影響。

RGBA是RGB+A組合，RGB是紅黃藍，A是透明度（值介於0-1之間，0表示完全透明，1表示不透明）。

在CSS3還有HSLA顏色表示法，它與RGBA類似，通過也可以實現設定元素透明度效果，文字不受影響。

關於更多顏色知識可以參閱CSS顏色值型別一章節。

相關文章