如何设置div的透明度但是其中的文字不透明
摘要：如何设置div的透明度但是其中的文字不透明:设置div透明度的时候可能很多朋友会遇到这样一个问题，那就是对象中的文字也被产生了透明现象，也不能说事缺陷，也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果，但是文字不透。代码实例如下:蚂蚁部落 蚂蚁部落 ...
如何设置div的透明度但是其中的文字不透明:
设置div透明度的时候可能很多朋友会遇到这样一个问题，那就是对象中的文字也被产生了透明现象，也不能说事缺陷，也可能有时候需要这样的效果。这里就介绍一下如何将对象设置为透明效果，但是文字不透。代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<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;
}
</style>
</head>
<body>
<div class="opacity">
<span>蚂蚁部落</span>
</div>
</body>
</html>
上面的代码将第二个div设置为半透明，但是文字也出现了透明现象。那么这里改造一下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<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>
以上代码实现了需要的效果。方法就是讲span元素从div取出来，使用绝对定位的方式，再将span元素定位到原来在div元素的位置。
相关文章
最新发布
阅读排行
热门文章
猜你喜欢