css背景透明其上文字不透明程式碼例項

antzone發表於2017-04-06
CSS

在實際應用中，可能有這樣的要求，那就是背景具有透明效果。

但是上面的文字不透明，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.warp {
  background: #ccc;
  width: 440px;
  height: 400px;
  border: 1px solid #ccc;
}
.content {
  width: 180px;
  height: 260px;
  margin: 0px auto;
  padding: 30px 30px;
  background: rgba(255, 255, 255, 0.6) !important;
  filter: Alpha(opacity=60);
  background: #fff; /*　使用IE專屬濾鏡實現IE背景透明*/
}
.content p {
  position: relative;
  text-align:center;
}
/*實現IE文字不透明*/
</style>
</head>
<body>
<div class="warp">
  <div class="content"><p>螞蟻部落歡迎您</p></div>
</div>
</body>
</html>

上面的程式碼能夠相容低版本IE瀏覽器，是先此效果還有其他思路。

相關文章