CSS實現div層半透明效果程式碼例項

admin發表於2017-02-23
CSS

現在好像比較流行半透明效果，可能是追求朦朧感吧，例如登陸視窗彈出層的背景是透明的，圖片說明的彈出層也是透明的，當然效果還是很好的，讓人感覺很新奇，也很實用，本章節就通過例項程式碼對此做一下介紹。

程式碼例項如下:

[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:350px;
  height:262px;
  margin:0px auto;
  background-image:url(mytest/demo/toumingbg.jpg);
}
#touming{
  width:300px;
  height:200px;
  filter:alpha(Opacity=80);
  -moz-opacity:0.5;
  opacity:0.5;
  z-index:100; 
  background-color:#ffffff;
}
</style>
</head> 
<body> 
<div id="box">
  <div id="touming"></div>
</div>
</body> 
</html>

touming元素是處於半透明狀態，程式碼非常簡單，關鍵程式碼如下:

[CSS] 純文字檢視 複製程式碼
filter:alpha(Opacity=80);
-moz-opacity:0.5;
opacity:0.5;

filter:alpha(Opacity=80)是為了相容IE8和IE8以下瀏覽器。

-moz-opacity:0.5，為了相容老版本的火狐瀏覽器，其實可以省略了現在。

opacity:0.5，標準瀏覽器適用。

相關文章