CSS如何實現半透明層上面的文字不透明

antzone發表於2017-04-08
CSS

現在比較流行一種效果是，當滑鼠放在某個元素上，通常情況下這個元素是一個圖片，會彈出來一個半透明的層，上面帶有一些說明性的文字，但是很多剛剛製作此效果的朋友可能會遇到這樣的問題，那就是說明文字也變的透明瞭，下面就介紹一下如何避免此中問題，希望給需要的朋友帶來一定的幫助。

先看一段有問題的程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{background:green;}
#touming{
  width:200px;
  height:100px;
  line-height:100px;
  text-align:center;
  background-color:black;
  margin:0px auto;
  filter:alpha(opacity=50);  
  -moz-opacity:0.5;  
  opacity:0.5;
  color:white;
}
</style>
</head>
<body>
<div id="touming">螞蟻部落歡迎您</div>
</body>
</html>

以上程式碼實現了實現了半透明效果，但是文字也被半透明瞭，這並非是我們想要的效果。

之所以出現這種文字，是因為透明屬性具有繼承性，下面就看一段解決方案程式碼:

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

以上程式碼實現了我們的要求，實現原理其實非常的簡單，其實就是讓文字不在座位設定透明度的元素的子元素，使用定位的方式移動過去。

相關文章