CSS opacity 透明度

admin發表於2019-04-19
CSS

opacity翻譯成漢語具有"不透明性"，那麼可以推測此屬性用於設定不透明度。

設定不透明度其實也就是設定透明度，這個很容易理解。

CSS中設定透明度的屬性有很多，簡單羅列如下：

（1）.CSS RGBA 屬性一章節。

（2）.CSS HSL() 函式一章節。

（3）.CSS HSLA() 函式一章節。

此屬性使用非常的簡單，但是它有自身的特點，在實際應用中需要注意一下。

因為這個特點在很多時候也是它的去點，下面分步通過程式碼例項對其進行一下介紹。

語法結構：

[CSS] 純文字檢視 複製程式碼
opacity: value|inherit;

屬性值解析：

（1）.value：介於0-1之間的數字，0表示完全透明，1表示完全不透明。

（2）.inherit：此屬性具有繼承性，可以繼承父元素的透明度。

特別說明：如果設定的屬性值不在0-1之間，那麼將就近取在合法範圍內的值。

總體上此屬性非常簡單，如果有些地方感覺不好理解，不用擔心，後面會通過程式碼例項演示。

瀏覽器支援：

（1）.IE9+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.ant{
  width:200px;
  height:100px;
  background-color:red;
  opacity:0.2;
}
</style>
</head>
<body>
<div class="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/19/223529rrq4iqiwi7isqqz6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼簡單分析如下：

（1）.設定div的背景顏色為紅色。

（2）.通過opacity屬性設定其透明度為0.2，圖片展示的已經很清楚了。

假設上面的設定的屬性值不在0-1之間，比如1.2，那麼將取距離1.2最近的合法值，也就是1。

大家可以自行測試一下，比較簡單，本文不在舉例子，下面再來看一段程式碼例項：

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/19/223557w356wsw3xv5s5miu.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.div中有一段文字"螞蟻部落"。

（2）.背景顏色依然是紅色，透明度和前一段程式碼沒有區別，是0.2。

（3）.不但div透明瞭，裡面的文字也具有透明效果，甚至都要看不到了。

（4）.更多的時候，我們是需要文字不透明，比如帶有透明效果的彈出層。

這是此屬性的一個特點，大多數時候此特點成為它的一個缺點，好在CSS中還有其他設定透明度的屬性。

下面是一段通過RGBA方式設定透明度的程式碼，可以有效避免上面的現象：

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

可以看到背景雖然透明瞭，但是裡面的內容保持最初的透明度。

rgba函式具有四個引數，前三個是RGB顏色值，最後一個引數用於規定透明度。

更多內容可以參閱CSS RGBA 屬性一章節。

相關文章