superjcn
superjcn
2012-07-23 23:02

div重叠(分层)问题,向高手请教!

已采纳

JSP代码:

<div class="showphoto"><div id="jqueryPic">
   <table cellspacing="0" border="0" width="950" height="400" bordercolor="white">
    <tr><td class="introduce">
    <!--edit company introduce-->
    </td>
        <td class="introphoto">
            <!-- show photo here -->
        
          <div id="photo_container"></div>
        
        </td></tr>
   </table>
 </div></div>

 CSS样式:

.showphoto{
    width:960px;height:420px;position:relative;z-index:1;top:50px;left:300px;
    background-color: #ffffff;
border: 2px solid transparent;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 0px 0px 12px #000000;
-webkit-box-shadow: 0px 0px 12px #000000;
box-shadow: 0px 0px 12px #000000;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
opacity: 0.39;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 39);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 39);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/
}
#jqueryPic{width:950px;height:400px;position:absolute;margin:10px;}
.introduce{width:330px;background:url(../images/introduce01.png)no-repeat right;
           background-color:gray;border-right:none;color:white;font-size:16px;}
.introphoto{background-color:white;border-left:none;position:relative;z-index:2;}

 其中showphoto的Div有圆角边框,并且是半透明背景,而table的td里面的两个div有背景图和焦点图片。现在的效果是,showphoto的div透明背景覆盖在jqueryPic(table)上面,显得table里面的内容很朦胧。我想让showphoto显示在最底层,可是不管我怎么调z-index属性,依然无动于衷。实在是没有办法了,请各位高手,老师们指教。谢谢你们...

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • iteye_5246 iteye_5246 9年前

    哥们我看了下,你的css里面有
    .introduce
    {
    background-color:gray;
    border-right:none;
    color:white;
    }

    color:white; 这个导致字体白
    在css .showphoto 中有一段要修改
    //原来是
    opacity: 0.39;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 39);
    /*-ms-filter must come before filter*/
    filter: alpha(opacity = 39);

    //改为
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 100);
    /*-ms-filter must come before filter*/
    filter: alpha(opacity = 100);
    }

    点赞 评论 复制链接分享
  • iteye_5246 iteye_5246 9年前

    .showphoto{
    width:960px;height:420px;position:relative;z-index:-1;top:50px;left:300px;
    background-color: #ffffff;
    border: 2px solid transparent;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
    -moz-box-shadow: 0px 0px 12px #000000;
    -webkit-box-shadow: 0px 0px 12px #000000;
    box-shadow: 0px 0px 12px #000000;
    /*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
    opacity: 0.39;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 39);
    /*-ms-filter must come before filter*/
    filter: alpha(opacity = 39);
    /*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
    /*All filters must be placed together*/
    }
    #jqueryPic{width:950px;height:400px;position:absolute;margin:10px;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 100);
    /*-ms-filter must come before filter*/
    filter: alpha(opacity = 100);
    }
    .introduce{width:330px;background:url(../images/introduce01.png)no-repeat right;
    background-color:gray;border-right:none;font-size:16px;}
    .introphoto{background-color:white;border-left:none;position:relative;z-index:2;}

    点赞 评论 复制链接分享

相关推荐