实现背景半透明及解决文字半透明的方法

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-03 13:40:53　-　阅:　-　评:0　-　积分:0

今天来分享下关于网页中常见的半透明效果及解决文字半透明的方法。
对于半透明效果我们已经并不陌生，网页中很常见。特别是在浏览图片时，我们会看到图片下面有一半透明背景并且上面还有一行文字说明。其实方法很简单，就是利用滤镜。核心代码: filter:alpha(opacity=60)此写法在ie下有效，言外之意在chrome等浏览下不被支持，解决方法是在后面加上opacity:.6即可。当然，你也可以使用rgba色来直接实现chrome等浏览器下的滤镜效果。源码如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现背景半透明及解决文字半透明的方法</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
.img{border:1px solid #ccc; position:relative;width:240px; text-align:center;overflow:hidden;}
.img a{display:inline-block; text-decoration:none; color:#fff}
.img a img{width:240px;height:240px;border:0}
.img .imgbg{position:absolute; bottom:0;left:0; width:240px; height:30px;
line-height:30px;background:#000; filter:alpha(opacity=60);opacity:.6}
.imgbg:hover{text-decoration:underline;}
</style>
</head>
<body>
<div class="img">
<a href="#"><img src="../../../../skin/yilingsj/image/logo.jpg " /></a>
<a href="#" class="imgbg">我的背景半透明哦!但我也半透明了</a>
</div>
</body>
</html>

效果图：
我的背景半透明哦!但我也半透明了
上图虽然实现了背景半透明，但我们会发现文字也跟着半透明了。为了更好的显示这一点，我们将"filter:alpha(opacity=60);opacity:.6"更改成"filter:alpha(opacity=10);opacity:.1"这回再来看看在浏览器下的渲染效果。如下图：我的背景半透明哦!但我也半透明了
怎么样，文字快看不到了吧。很多网站上都存在这个问题，但一般透明度不会低于50%,因此文字透明的不是很厉害。下面我们稍微做下变动，让背景与文字分离，这样文字就不受背景的控制了。源码如下：

在线演示<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>实现背景半透明及解决文字半透明的方法</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px;}
.img{border:1px solid #ccc; position:relative;width:240px; text-align:center;overflow:hidden;}
.img a{display:inline-block; text-decoration:none; color:#fff}
.img a img{width:240px;height:240px;border:0}
.img .imgbg,.img .imgtext{position:absolute; bottom:0;left:0; width:240px; height:30px;
line-height:30px;}
.imgbg{background:#000; filter:alpha(opacity=10);opacity:.1;z-index:5;}
.imgtext{z-index:9;}
.imgbg:hover{text-decoration:underline;}
</style>
</head>
<body>
<div class="img">
<a href="#"><img src="../../../../skin/yilingsj/image/logo.jpg " /></a>
<a href="#" class="imgbg">我的背景半透明哦!但我也半透明了</a>
<div class="imgbg"></div></li>
</div>
</body>
</html>

效果图：
我的背景半透明哦!但我不半透明
再次改为"filter:alpha(opacity=10);opacity:.1"来测试下效果，如下图:

怎么样，文字透明的问题解决了吧

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-08-03/65.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！