大家来找错!

我想得到的效果: 有两个层(a,b),一个层(a)包含另一个层(b),现在通过js动态给a层添加一个层(c),且c层包含有图片,想用c层 作为背景的;代码如下:
     <script language="javascript" type="text/javascript">
   function show(){
          var dom=document.getElementById("id2");
  var adddiv = document.createElement("div");
  adddiv.id="back"+dom.id;
  adddiv.innerHTML = "<img src='backgroundImage/1.jpg' width='100%' height='100%'/>";
  
  dom.style.position="relative";   
  cssStr = "position:absolute; z-index:-100; width:100%; height:100%; left:0px; top:0px; padding-top:0px; padding-left:0px; padding-right:0px; padding-bottom:0px;";
  var style =document.createElement("style"); 
  style.type = "text/css"; 
  style.innerHTML = cssStr; 
  adddiv.appendChild(style);
  dom.appendChild(adddiv); 
}
   window.onload=show;
</script>
<body>
<div id="id2" style=" position:relative; width:50%; height:50%; border:1px solid #990033;">
   <div>sfsdfd</div>
</div>   
 不知道哪错啦!  c层总是被b层挤下去了一样,总做不了a层的背景!  大家帮忙找找!

解决方案 »

  1.   


    <script language="javascript" type="text/javascript">
      function show(){
      var dom=document.getElementById("id2");
    var adddiv = document.createElement("div");
    adddiv.id="back"+dom.id;
    adddiv.innerHTML = "<img src='http://c.csdn.net/bbs/t/5/i/pic_logo.gif' width='100%' height='100%'/>";
      
    adddiv.style.position="relative";
    adddiv.style.zindex = "0";
    adddiv.style.width = "100%";
    adddiv.style.height = "100%";
    adddiv.style.left = "0px";
    adddiv.style.top = "0px";
    dom.appendChild(adddiv);  
    }
      window.onload=show;
    </script>
    <body>
    <div id="id2" style=" position:relative; width:50%; height:50%; border:1px solid #990033;z-index:-1">
      <div>sfsdfd</div>
    </div>   
      

  2.   


    SCROLLBAR-FACE-COLOR: #6D4110;   
      SCROLLBAR-HIGHLIGHT-COLOR: #3C140C;   
      SCROLLBAR-SHADOW-COLOR: #3C140C;   
      SCROLLBAR-3DLIGHT-COLOR:#3C140C; 
      

  3.   

    为啥要像背景一样显示？直接显示成背景不就行了……
    像背景一样显示 是啥效果？<script language="javascript" type="text/javascript">
      function show(){
      var dom=document.getElementById("id2");
      dom.style.background = "url(http://c.csdn.net/bbs/t/5/i/pic_logo.gif)";
      /*
        var adddiv = document.createElement("div");
            adddiv.id="back"+dom.id;
            adddiv.innerHTML = "<img src='http://c.csdn.net/bbs/t/5/i/pic_logo.gif' width='100%' height='100%'/>";
              
            adddiv.style.position="relative";
            adddiv.style.zindex = "0";
            adddiv.style.width = "100%";
            adddiv.style.height = "100%";
            adddiv.style.left = "0px";
            adddiv.style.top = "0px";
            dom.appendChild(adddiv);
    */
        }
      window.onload=show;
    </script>
    <body>
    <div id="id2" style=" position:relative; width:50%; height:50%; border:1px solid #990033;z-index:-1">
      <div>sfsdfd</div>
    </div>
      

  4.   


    哦，是要做b的背景，不是做a的背景啊…… 
    <script language="javascript" type="text/javascript">
      function show(){
      document.getElementById("id2").childNodes[0].style.background = "url(http://avatar.profile.csdn.net/3/5/E/2_muzizhuben.jpg)";
      }
      window.onload=show;
    </script>
    <body>
    <div id="id2" style=" position:relative; width:50%; height:50%; border:1px solid #990033;z-index:-1">
      <div style="over-flow:hidden">sfsdfd<BR>aaaaa<BR>bbbbb</div>
    </div>
      

  5.   

    哎!  我觉得应该是我表述的有问题!那我在讲一遍!
    三个层 a,b,c
    a的上面是c, c的上面是b
    我想让c的大小与a相同,且c中有个图片填满c,这就相当
    于是a的背景啦! 而b还是在最上面不动!
    所以产生的效果看起来是给a设置了背景图片!
    希望这次可以理解我的意思!在帮忙想想谢谢!
      

  6.   

    补充一句:  是在火狐浏览器中实现啊! 在ie里这样的我实现过了! 但在ie中的方法在火狐中不能达到效果!