DIV+CSS网页布局技巧实例3：设置层的透明度

有时候我们需要用到层的透明度，把下边的背景透出来，如下图：

这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS，NO,NO，既然我们是CSS布局教程，那么就尽量用CSS来解决问题！

filter: alpha(opacity=70);
opacity: 0.7;

把这两句代码加入到要实现半透明层的CSS样式表里即可，简单吧！！
注：70和0.7的值可改为你需要的

标准之路www.aa25.cn 提示：可以先修改部分代码后再运行

（如果您觉得本站不错，请告诉身边的朋友，或转载到论坛、百度知道、贴吧等，记得带网址哟，不胜感激！）

更多评论(18)..会员评论

icelove0831(122.96.*.*) 发表于：2011-07-10 00:57:36: 我想问下在这个透明层里面写文字文字也会透明这个问题怎么解决啊求助; 管理员回复：用两个定位层，一个透明，一个放文字

Yangxiuguo(203.187.*.*) 发表于：2011-01-06 11:26:19: 用这种方法可以实现在FF下层透明：background:rgba(255, 255, 255, 0.2)!important;filter:Alpha(opacity=100);

78979(116.20.*.*) 发表于：2010-12-10 14:18:59: <DIV class=workContent> <H1 class="STYLE1">Ao001F8</H1> <P>       产品产品主要远销于欧美，日韩国家。绍介绍介绍介绍介绍产品主要远销于欧美，日韩国家。绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍 ......</P> <DIV class=wC_Category><SPAN class="category coding"></SPAN><SPAN class="category web"></SPAN></DIV> <A class="workGraphic friendFight"></A> <A class="wC_Button launchProject" href="#"></A></DIV> css代码 .friendFight { BACKGROUND: url(../portfolio/Ao001F1.jpg) } 点解看不到图片的？？？; 管理员回复：请确认图片是否存在且路径是否正确

liuyanggowar(120.87.*.*) 发表于：2010-06-28 23:19:20: 这个网站,哪里有学习CSS滤镜的详细教程啊?我对滤镜这块什么都不懂; 管理员回复：没有这方面详细的教程

JIA(119.109.*.*) 发表于：2010-02-08 13:21:40: <!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>alpah_opacity</title> <style> body{ background:url(bg.jpg)} #layout{position:absolute; top:50px;left:50px; width:500px; height:500px; border:1px solid:#006699; background:#fff; filter:alpha(opacity=70);opacity:0.7;} </style> </head> <body> <div id="layout"></div> </body> </html> 我设置了透明度，可是却看不到变化，请管理员帮忙看一下，谢谢; 管理员回复：我看了，正常呀，你是在什么浏览器下看的？会不会是背景图片没显示，所以看不到效果的

QQ35226522(115.61.*.*) 发表于：2010-01-08 16:19:47: 这种状态貌似只有在id或者class的情况下才能实现，如果连接有文字，改变经过时的颜色透明度是不可以的.有没有什么好的解决办法？; 管理员回复：不太明白