当前位置：首页 → 问答吧 → 设置了position: relative;为什么子div还是透明呢?

设置了position: relative;为什么子div还是透明呢?

时间：2010-10-03

来源：互联网

<!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> <style> body{background:url(http://www.google.cn/intl/zh-CN/images/logo_cn.gif); font-size:12px;} #mbCenter { position: absolute; position: fixed; z-index: 9999; overflow: hidden; background-color: #000; -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50); -khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50); -moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50); box-shadow: 0px 5px 20px rgba(0,0,0,0.50); /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#ccc')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#ccc'); filter:alpha(opacity=60); /* IE */ -moz-opacity:0.6; /* Moz + FF */ opacity: 0.6; /* 支持CSS3的浏览器（FF 1.5也支持）*/ } #mbCenter.mbLoading { background: #000 url(images/loading.gif) no-repeat center; position: relative; -webkit-box-shadow: none; -khtml-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } #mbImage { position: relative; z-index: 99999; left: 0; top: 0; font-family: Myriad, Verdana, Arial, Helvetica, sans-serif; line-height: 20px; font-size: 12px; color: #ff0000; text-align: left; background-position: center center; background-repeat: no-repeat; padding: 10px; width:100%; height:100%; } #mbBottom { min-height: 20px; font-family: Myriad, Verdana, Arial, Helvetica, sans-serif; line-height: 20px; font-size: 12px; color: #999; text-align: left; padding: 10px 10px 0 10px; } </style> </head> <body> <div class id="mbCenter"> <div id="mbImage">　<img src="http://desk.blueidea.com/DESK/16001200BZ/IndoorPhoto_3/225/IndoorPhoto_3001.jpg" border="0"> </div> <div id="mbBottom"> <div id="mbTitle"></div> <div id="mbNumber"></div> <div id="mbCaption"></div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

怎么使得<div id="mbImage">里面的图片不透明呢？

[ 本帖最后由 iou33449999 于 2010-10-3 04:37 编辑 ]

作者: iou33449999 发布时间: 2010-10-03

可以通过两个同级元素来实现，让一个飞到另一个的上面。

这里也有部分资料，不过因为兼容性，实现起来步骤多点：背景透明而内容不透明的容器

[ 本帖最后由 yoom 于 2010-10-3 11:03 编辑 ]

作者: yoom 发布时间: 2010-10-03