CSS 透明度設定

admin發表於2018-05-24
CSS

有兩種常用的方式設定元素透明度，下面分別做一下介紹。

一.opacity屬性設定透明度:

[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:100px;
  height:100px;
  background:red;
  opacity:0.3;
  filter:alpha(opacity=30);
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

opacity值介於0-1之間，0表示完全透明，1表示完全不透明，但是低版本IE瀏覽器不支援；filter:alpha(opacity=30)是為了相容低版本IE瀏覽器，值介於0-100之間。

上面的程式碼不但讓div產生了透明度，文字也會產生透明度，這往往不是我們所期望的。

解決方案如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
*{ 
  margin:0px; 
  padding:0px; 
} 
.opacity{ 
  width:150px; 
  height:150px; 
  background-color:green; 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  opacity:0.5; 
  margin-left:20px; 
  margin-top:20px; 
} 
span{ 
  display:block; 
  width:80px; 
  height:80px; 
  position:absolute; 
  top:20px; 
  left:20px; 
} 
</style> 
</head> 
<body> 
  <div class="opacity"></div> 
  <span>螞蟻部落</span>  
</body> 
</html>

原理很簡單，就是以定位方式將存放文字的元素覆蓋於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">
#box{
  width:300px;
  height:200px;
  background-color:rgba(255,0,0,0.3);
  text-align:center;
  font-size:12px;
}
</style>
</head>
<body>
<div id="box">螞蟻部落</div>
</body>
</html>

優點是隻會將元素背景設定為透明，文字不會透明；缺點是IE8和IE8以下瀏覽器不支援。

關於RGBA可以參閱CSS3 RGBA一章節。

相關文章