当前位置：首页 → 问答吧 → 请教CSS如何实现内容和边框不透明，而背景透明

请教CSS如何实现内容和边框不透明，而背景透明

时间：2010-02-26

来源：互联网

作者: xu33 发布时间: 2010-02-26

padding

作者: bluridea 发布时间: 2010-02-26

<!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> <style type="text/css"> body{background:url(http://www.google.cn/intl/zh-CN/images/logo_cn.gif);position:relative;width:80%;margin:40px auto;font-size:12px;} p{margin:0;} /*定义透明背景容器开始*/ .alphaContainer{border:solid 1px #000;position:relative;overflow:hidden;padding:20px;} .alphaContainer:after {content:".";display:block;height:0;clear:both;visibility:hidden;} b.alphaBg{opacity:0.4;background:#000;height:2000px;position:absolute;left:0;top:0;width:100%;z-index:1;text-indent:-999em;} .content{position:relative;z-index:2;background:#fff;width:100%;float:left;border:solid 1px blue;} .content p{line-height:23px;display:inline-block;margin:10px;} /*定义透明背景容器结束*/ </style>   </head> <body> <div class="alphaContainer"> <b class="alphaBg">这个层用来显示背景</b> <div class="content"> <p>生命如此短暂生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！生命如此短暂！</p> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

试试这个，另外：RGBa色彩的浏览器支持也有方法。

作者: yoom 发布时间: 2010-02-26

实在是对我很有帮助，谢谢啦~~

作者: aj17430279 发布时间: 2010-09-21

只是可惜，opera FF 都支持，IE6,不行，IE7，也不行。。。有没有什么解决办法呢？

作者: aj17430279 发布时间: 2010-09-21

IE6\IE7，我这里看起来都可以啊

[ 本帖最后由鱼于 2010-9-21 10:55 编辑 ]

作者: 鱼发布时间: 2010-09-21