您的位置:首页> 实例代码> CSS实例

CSS如何实现半透明层上面的文字不透明

2017-4-8 10:54| 作者: antzone| 查看: 637| 评论: 0|来自: 蚂蚁部落

现在比较流行一种效果是,当鼠标放在某个元素上,通常情况下这个元素是一个图片,会弹出来一个半透明的层,上面带有一些说明性的文字,但是很多刚刚制作此效果的朋友可能会遇到这样的问题,那就是说明文字也变的透明了,下面就介绍一下如何避免此中问题,希望给需要的朋友带来一定的帮助。

先看一段有问题的代码:

[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>

以上代码实现了我们的要求,实现原理其实非常的简单,其实就是让文字不在座位设置透明度的元素的子元素,使用定位的方式移动过去。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部