css實現的背景透明文字不透明例項程式碼

antzone發表於2017-04-04
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:100px;
  height:100px;
  margin:0px auto;
  color:red;
  background-color:green;
  text-align:center;
  line-height:100px;
  filter:alpha(opacity=20);
  opacity:0.2; 
}
</style>
</head>
<body>
<div id="box">螞蟻部落</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">
#main
{
  width:100px;
  height:100px;
  margin:0px auto;
  position:relative;
}
#box
{
  width:100px;
  height:100px;
  background-color:green;
  position:absolute;
  left:0px;
  top:0px;
  filter:alpha(opacity=20);
  opacity:0.2; 
}
#txt
{
  width:100px;
  height:100px;
  position:absolute;
  left:0px;
  top:0px;
  text-align:center;
  line-height:100px;
  color:red;
}
</style>
</head>
<body>
<div id="main">
  <div id="box"></div>
  <div id="txt">螞蟻部落</div>
</div>
</body>
</html>

以上程式碼實現了我們的要求，文字不具有透明效果，而div卻有透明效果，下面介紹一下它的實現原理。

實現原理:

由於設定透明度相關的屬性具有繼承性，所以如果設定div透明度以後，它內部的文字也會具有透明度，所以這個時候就需要另闢蹊徑，將文字放入另一個單獨的div，然後通過定位的方式覆蓋於設定透明度的div之上，這樣就實現了我們的效果。

相關文章