css的透明屬性簡單介紹

antzone發表於2017-03-03
CSS

設定元素的透明度是常見的操作，尤其是最近幾年，效果經常有個透明效果，比如滑鼠懸浮圖片可以出現半透明的遮罩文字提示效果，具體可以參閱如何實現滑鼠放在圖片上出現文字說明效果一章節，下面就將透明效果剝離出來做一下簡單介紹。

一.基本介紹:

opacity屬效能夠設定透明度，屬性值是介於0-1之間的，0表示完全透明，1表示完全不透明。

程式碼例項如下:

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

以上程式碼可以設定子div為半透明，但是上面的程式碼有相容性問題，儘管opacity屬性符合w3c標準，但是IE8和IE8以下瀏覽器不支援，那麼就需要做一下相容處理，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  background:red;
}
.demo{
  width:50px;
  height:50px;
  background:black;
  opacity:0.5;
  filter:alpha(opacity=50);
}
</style> 
</head> 
<body>
<div id="box">
  <div class="demo"></div>
</div> 
</body> 
</html>

程式碼相容IE8和IE7瀏覽器，IE6還是有問題，這個還需要其他處理，這裡就不多介紹了，再說了，IE6存活時間也不會太久，這裡就不用考慮了，上面程式碼特別加入了以下程式碼:

[CSS] 純文字檢視 複製程式碼
filter:alpha(opacity=50)

需要特別注意的是，使用filter屬性時，屬性值是介於0-100的，0表示完全透明，100表示完全透明。

二.透明度的繼承:

關於透明的繼承先看一段程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  background:red;
}
.demo{
  width:100px;
  height:50px;
  font-size:12px;
  color:blue;
  text-align:center;
  line-height:50px;
  background:black;
  opacity:0.5;
  filter:alpha(opacity=50);
}
</style> 
</head> 
<body>
<div id="box">
  <div class="demo">螞蟻部落</div>
</div> 
</body> 
</html>

在以上程式碼中，不但子div具有半透明效果，並且裡面的文字也具有透明效果，這往往不是我們需要的，說明這個屬性具有繼承性，下面就介紹一下如何解決上面的現象。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:200px;
  height:200px;
  background:red;
  position:relative;
}
.demo{
  width:100px;
  height:50px;
  font-size:12px;
  color:blue;
  text-align:center;
  line-height:50px;
  background:black;
  opacity:0.5;
  filter:alpha(opacity=50);
}
.another{
  width:100px;
  height:50px;
  font-size:12px;
  color:blue;
  text-align:center;
  line-height:50px;
  position:absolute;
  left:0px;
  top:0px;
}
</style> 
</head> 
<body>
<div id="box">
  <div class="demo"></div>
  <div class="another">螞蟻部落</div>
</div> 
</body> 
</html>

以上程式碼實現了我們的要求，原理非常的簡單，既然此屬性有繼承性，那麼就將文字放在另一個容器中，並且不讓這個容器是demo的子元素，這樣就可以避免繼承。

相關文章